我无法找到错误的位置。我需要在select选项中更改当前月份的颜色(仅限世界“(当前)”)
答案 0 :(得分:1)
您可以为选项本身设置样式,而不是该字体标记。
<?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>";
?>
无论如何,这将使整个选项不仅仅是当前颜色。因为选项不可能保留除纯文本之外的任何内容。所以不使用原生选择你可以试试这个。代码很抱歉,但你可以实现你想要的。
<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>
答案 1 :(得分:0)
代码本身似乎是正确的。但由于图像无法复制,我不愿意再写一次。
您的主要问题似乎是当前未在选择下拉列表中设置样式。这可能是浏览器特定的行为。要查看是否是这种情况,只需将select替换为ul,将选项替换为li tag。当它显示正确时,您不能在选项内使用字体。因为select是一个由浏览器定义样式的元素。
这也是bootstrap使用ul / li渲染下拉列表的原因。因为它们可以独立于浏览器设置样式。