如何设置HTML选择/选项标签？ [英] How to style HTML select/option tag?

问题描述

我想创建一个带有html选择的下拉菜单，因此我想对它进行风格化。我想为选项标签设置一个填充，所以他们不会那么拥挤，但我不能这样做。 （它不工作）
任何想法？

  #categories 
 {
 padding ：10px 10px 10px 10px; 
 background-color：＃826B78; 
 font-size：20px; 
 color：white; 
 margin：10px 10px 10px 10px; 
 border：none; 
 outline：none; 
} 
 
 #categories选项
 {
 margin：30px 30px 30px 30px; 
 padding：30px 30px 30px 30px; 
 font-size：20px; 
} 
  

类别id属于select标签

解决方案

很难用CSS选择菜单样式。最好的方法是使用jquery u can风格，并且更好地控制jquery的代码。只需使用 http://gregfranko.com/jquery.selectBoxIt.js/

我刚刚举了一个使用jquery的样式选择的例子，你可以在这里查看演示。

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  body {font-family：'arial'，san-serif;}。select {width：200px; height：30px; border：1px solid #ddd; line-height：30px;位置：相对; margin-bottom：40px;}。select span {display：block;颜色：＃333; font-size：12px; padding：0 10px;}。select ul {display：none; background：#fff; border：1px solid #ddd; min-width：300px; position：absolute; top：100％; left：0; list-style-type：none; margin：0; padding：0; z-index：10;}。select ul> li {font-size：12px;}。选择ul> li {color：＃333;显示：block; padding：2px 8px; text-decoration：none; line-height：24px;}。select ul> li：hover {background：＃e4f4fa; cursor：pointer;}  

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< label>首先选择< / label>< div class =select > < select> < option> Item< / option> < option>项目2< / option> < option> Item 3< / option> < / select>< / div>< label>第二个选择< / label>< div class =select> < select> < option> this 1< / option> < option> this 2< / option> < option> this 3< / option> < / select>< / div>  

I would like to create a dropdown menu with html select thus I would like to style it as well. I would like to set a padding to the option tags so they wouldn't be so overcrowded, but I can't do so. (it doesn't work) any idea?

#categories
{
padding: 10px 10px 10px 10px;
background-color: #826B78;
font-size: 20px;
color: white;
margin: 10px 10px 10px 10px;
border: none;
outline: none;
}

#categories option
{
margin: 30px 30px 30px 30px;
padding: 30px 30px 30px 30px;
font-size: 20px;
}

the categories id belongs to the select tag

解决方案

It is difficult to style select menu with css. The Best way of doing it is with jquery u can style and have a better control over the code with jquery. Just use a custom jquery like http://gregfranko.com/jquery.selectBoxIt.js/

I have just made an example of styling select with jquery, you can check the demo here

// Code to convert select to UL
$('.select').each(function() {
  var $select = $(this).find('select'),
    $list = $('<ul />');
  $select.find('option').each(function() {
    $list.append('<li>' + $(this).text() + '</li>');
  });
  //Remove the select after the values are taken
  $select.after($list).remove();


  //Append Default text to show the selected
  $(this).append('<span>select</span>')
  var firsttxt = $(this).find('li:first-child').text();
  $(this).find('span').text(firsttxt)

  // On click show the UL
  $(this).on('click', 'span', function(e) {
    e.stopPropagation();
    $(this).parent().find('ul').show();
  });

  // On select of list select the item
  $(this).on('click', 'li', function() {
    var gettext = $(this).text();
    $(this).parents('.select').find('span').text(gettext);
    $(this).parent().fadeOut();
  });

})


// On click out hide the UL
$(document).on('click', function() {
  $('.select ul').fadeOut();
});

body {
  font-family: 'arial', san-serif;
}

.select {
  width: 200px;
  height: 30px;
  border: 1px solid #ddd;
  line-height: 30px;
  position: relative;
  margin-bottom: 40px;
}

.select span {
  display: block;
  color: #333;
  font-size: 12px;
  padding: 0 10px;
}

.select ul {
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 300px;
  position: absolute;
  top: 100%;
  left: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.select ul > li {
  font-size: 12px;
}

.select ul > li {
  color: #333;
  display: block;
  padding: 2px 8px;
  text-decoration: none;
  line-height: 24px;
}

.select ul > li:hover {
  background: #e4f4fa;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>First Select</label>
<div class="select">  
    <select>
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
    </select>
</div>

<label>Second Select</label>
<div class="select">
    <select>
         <option>this 1</option>
         <option>this 2</option>
         <option>this 3</option>
    </select>
</div>

这篇关于如何设置HTML选择/选项标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！