相关疑难解决方法(0)

是否有一种仅限CSS的方式来设置<select>下拉列表的样式？

我需要<select>尽可能多地为一个表单设置样式,而不需要任何JavaScript.我可以在CSS中使用哪些属性？

此代码需要与所有主流浏览器兼容:

• Internet Explorer 6,7和8
• 火狐
• 苹果浏览器

我知道我可以使用JavaScript:示例.

我不是在谈论简单的造型.我想知道,只有CSS才能做到最好.

我在Stack Overflow上发现了类似的问题.

而这一次在Doctype.com.

我想用缩进创建多级select2选项,但我不想使用optgroup元素,因为我想允许选择主要类别.如果是select2,有什么方法可以设置样式吗？

我的原始HTML选择如下所示:

<select class="js-select-multiple">
  <option class="l1">Option 1</option>
  <option class="l2">Suboption 1</option>
  <option class="l2">Suboption 2</option>
  <option class="l2">Suboption 3</option>
  <option class="l1">Option 2</option>
  ...
</select>
<script>$(".js-select-multiple").select2({maximumSelectionLength: 5});</script>

所以不使用Select2我可以添加text-indent属性到.l2类.但是,似乎Select2不使用那些用于选项的类,因此设置这些类的样式将不起作用.

那有什么解决方法吗？

在选择下拉列表中,我需要将某些项目设置为"强/粗".

我怎样才能做到这一点？

我理想要求的例子:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option>

看看这个简单的小提琴option里面浮动的select.

小提琴

这似乎在Chrome和Edge中完美运行,但在Firefox中则不然.为了在Firefox中获得相同的结果,有没有可能或黑客？

    <select size="8">
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option class="flip"></option>
      <option class="flip"></option>
      <option class="flip"></option>
      <option class="flip"></option>
    </select>

    select{
      width: 420px;
      height: 200px;
      overflow: hidden;
    }

    option{
      width: 100px;
      height: 100px;
      float: left;
    }

    select option:nth-child(odd){
      background: #aaa;
    }
    select .flip:nth-child(odd){
      background: #fff;
    }
    select .flip:nth-child(even){
      background: #aaa;
    }

大家好我正在使用flask WTForm表单控件类作为宽度，但不确定如何在snipet中做到这一点，所以我对宽度进行了硬编码。

我面临的问题是输入真的很长，但下拉选项与输入宽度不匹配。当您运行代码段时，您可以看到下拉菜单是输入宽度的 1/10。我尝试给选项和数据列表相同的宽度，但没有任何效果。

我将如何使 chrome 上的选项下拉菜单与我的输入具有相同的宽度，谢谢

<input class="form-control" type="text" id="color" style = "width:800px" list="colors_data">
                        <datalist id="colors_data"class="form-control"style = "width:800px">
                          <option style = "width:800px"value="red"></option>
                          <option style = "width:800px"value="orange"></option>
                          <option style = "width:800px"value="green"></option>
                          <option style = "width:800px"value="blue">The color of the sky</option>
                        </datalist>

编辑：将大小更改为 800px 我尝试通过此链接创建我自己的数据列表，但我面临同样的问题 Creating a HTML5 datalist on the fly

我附上了一张图片以更清楚地显示问题。如您所见，下拉选项比输入本身小得多。我该如何解决这个问题谢谢

当下拉菜单打开或关闭时，如何设置不同的样式？是否有任何伪选择器或技巧？当然没有javascript。

<select>
  <option> op1 </option>
  <option> op2 </option>
</select>

并且 :hover 并不真正适合我的需要，因为当下拉菜单展开时，我可以将光标移开。它仍然是开放的，但 :hover 样式不再适用。

我有一个包含选项的下拉列表.我想部分打破和加粗一些文本以及插入上下文中断.我尝试使用CSS以及HTML标签,但我无法得到它.有人可以建议一个解决方案？提前致谢

它不是那么容易吗？

<select>
<option>Red<span style="width:7px;height:7px;background:red"></span></option>
<option>Green<span style="width:7px;height:7px;background:green"></span> 
</option>
</select>

试图实现如下输出

任何想法如何做到这一点？

这段代码中是否可以使用html标签创建一个单词？

echo "<select>";
echo "<option ><strong><em>carro</em></strong></option >";
echo "<option >car</option >";
echo "<option >apple</option >";
echo "</select>";

我的HTML表单<Option>里面有一个内部<select>.

为了更好的可见性,我想在我的选项中使用TAB.

下拉列表中没有选择显示为:

1. 先生测试 - 技术员
2. 错过VeryLongTest - 会计
3. X先生 - 家政

但我希望它显示如下:

1/........先生测试........................-技术员

2/........错过VeryLongTest .......-会计

545/....先生X ............................-管家

有没有办法做到这一点？

我想更改数据列表 HTML 的高度和宽度，但它不起作用。如何解决这个问题？

          <input type="text" list="dose" />
          <datalist id="dose" class="doseinput" style="height: 34px;width: 153px; ">
            <option>1+1+1</option>
            <option>1+1+0</option>
            <option>1+0+0</option>
            <option>0+1+0</option>
            <option>0+0+1</option>
            <option>0+1+1</option>
            <option>1+0+1</option>
          </datalist>