2

我想用 html select 创建一个下拉菜单，因此我也想设置它的样式。我想为选项标签设置一个填充，这样它们就不会那么拥挤，但我不能这样做。（它不起作用）任何想法？

#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;
}

类别 ID 属于选择标签

4

5 回答 5

3

禁用默认设置可以让您更加自由 - 给您选择一个类，在该类中使用以下内容：

-webkit-appearance:none; 
-moz-appearance:none; 
 appearance:none;

然后添加您的默认样式

于 2015-08-04T20:26:22.087 回答
2

很难用 CSS 设置选择菜单的样式。最好的方法是使用 jquery，您可以使用 jquery 设置样式并更好地控制代码。只需使用自定义 jquery，如http://gregfranko.com/jquery.selectBoxIt.js/

我刚刚制作了一个使用 jquery 进行样式选择的示例，您可以在此处查看演示

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

于 2013-06-19T09:56:40.480 回答
0

您可以提供样式来选择这样的标签，也可以使用类名或 id

select
{
    display: inline-block;
    width: 150px;
    height: 20px;
    padding: 3px 6px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
于 2013-06-19T08:57:31.800 回答
0

html5 规范不提供通用样式属性来自定义此用户输入控件元素。在网上找到的唯一方法是使用标签元素来引用此控件以进行样式设置

于 2017-05-15T21:01:19.323 回答
-3

避免在此处使用 <select> 元素，因为它们无法在 WebKit 浏览器中完全设置样式。

根据那些自力更生的人

于 2014-03-20T07:16:26.050 回答