Php combobox option color? - php

Question

I can not find where the error is. I need to change the color of the current month in select option(only world "(current)")

Answer 1

Instead of that font tag you can style the option itself.
<?php
/*Array of months*/
$months = Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$gd = getdate();
echo "<select style='font-size:40px;width:50%;float:left'>";
for($i=1;$i<=12;++$i)
{
/*Specify which style you want to apply*/
$style = ($gd['mon']==$i)?"style='color:red;'":"";
echo "<option value='".$i."' $style>". $month[$i] ." (current)</option>";
}
echo "</select>";
?>
Anyway this will color entire option not only current. Because it is not possible for an option to hold anything apart from plain text. So without using native select you can try this. code is heavy sorry for that but you can achieve what you want.
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<?php
$months = Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$gd = getdate();
echo "<select id='selectbox1' style='font-size:40px;width:50%;float:left'>";
for($i=1;$i<=12;++$i)
{
if($gd['mon']==$i)
{
echo "<option class='container' value='".$i."'>".$months[$i]." (current) </option>";
}
else
{
echo "<option value='".$i."'>".$months[$i]."</option>";
}
}
echo "</select>";
?>
<script type="text/javascript">
// Iterate over each select element
$('select').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color:red">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
</script>
<style>
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial,Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active,
.styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
color: green;
}
.options li:hover {
background-color:#39f;
color:white;
}
</style>
example fiddle is : http://jsfiddle.net/tintucraju/3u9fkyd3/

Answer 2

The code itself seems to be correct. But as it can't be copied because of the image, i'm not willing to write it again.
Your main problem seems to be the current is not styled inside the select dropdown. Which could be a browser specific behaviour. To see if this is the case just replace the select with ul and the option with li tag. When it's shown correctly then you can't use font inside the option. Because select is a element which style is defined by the browser.
This is also the reason why bootstrap uses ul/li for rendering dropdown. As they can be styled independently from browsers.