Styling part of the OPTION text

前端 未结 6 771
迷失自我
迷失自我 2020-11-22 15:19

I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 

jquery:

(function($) {
  $(document).ready(function() {
    $('#myselect option').each(function() {
      $(this).html(' ' + $(this).text());
    })

  });
  $('.preview').html(' ');
  $('#myselect').change(function() {
    $('.preview').html(' ');

  });

})(jQuery);

Some CSS:

#myselect {
  margin: 40px;
  height: 30px;
  font-size: 14pt;
}

option.red {
  color: red;
}

option.green {
  color: green;
}

.preview {
  font-size: 20pt;
}

提交回复
热议问题