Question

我无法找到错误的位置。我需要在select选项中更改当前月份的颜色（仅限世界“（当前）”）

Answer 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>

示例小提琴是：http://jsfiddle.net/tintucraju/3u9fkyd3/

Answer 2

代码本身似乎是正确的。但由于图像无法复制，我不愿意再写一次。

您的主要问题似乎是当前未在选择下拉列表中设置样式。这可能是浏览器特定的行为。要查看是否是这种情况，只需将select替换为ul，将选项替换为li tag。当它显示正确时，您不能在选项内使用字体。因为select是一个由浏览器定义样式的元素。

这也是bootstrap使用ul / li渲染下拉列表的原因。因为它们可以独立于浏览器设置样式。

Php组合框选项颜色？

2 个答案: