如何样式的html“选择”元素的选项?

这是我的HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。

当前回答

实际上你可以添加:before和:after并设置样式。至少它是有意义的

选择{ 字体大小:18 px; background - color: # ffffff; ｝之前选择:{ 内容:“>”; 字体大小:20 px; 显示:没有; padding-right: 10 px; padding-left: 5 px; 颜色:# fff; ｝选择:徘徊:{之前显示:内联; ｝ <select id="ddlProducts" name="ddProducts"> <option>Product1: Electronics </option> <option>Product2: Sports </option> < /选择>

2017-10-16 14:40:02

其他回答

实际上你可以添加:before和:after并设置样式。至少它是有意义的

2017-10-16 14:40:02

Bootstrap允许你通过data-content使用样式:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

例子: https://silviomoreto.github.io/bootstrap-select/examples/

2016-11-17 17:29:46

如果你不想使用JavaScript，试试这个:

select {
  margin-top: 2% !important;
  font-size: 19px !important;
  text-align: center !important;
  width: 25% !important;
  padding: 6px 12px !important;
}
option {
  min-height: 1.5rem !important;
  padding: 14px !important;
}

2022-11-20 08:18:27

即使没有太多的属性要改变，但你可以实现以下样式只有css:

.options { 边框:1px solid #e5e5e5; 填充:10 px; ｝选择{ 字体大小:14 px; 边界:没有; 宽度:100%; 背景:白色; ｝ < div class = "选项”> <选择> 苹果<选项值= " " > < /选项> 香蕉<选项值= " " > < /选项> 橙色<选项值= " " > < /选项> 芒果<选项值= " " > < /选项> < /选择> < / div >

2019-12-06 08:20:54

这是一个html css代码，用于样式选项和选择标签。选择的选项:背景和粗体关闭后，它看起来是斜体。

    <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>

2021-07-07 17:28:18

如何样式的html“选择”元素的选项?

推荐文章

最新文章

标签