用CSS来设置默认的下拉选项的样式[重复]。

问题描述 投票:0回答:1

我一直在想办法只用CSS对选择输入的默认选项标签进行样式设计。似乎选项标签支持的CSS非常少。有谁知道,如果有任何工作周围的风格的选择输入的选项,如:改变边框和颜色,项目之间的空间,改变默认的选择颜色是蓝色的。任何想法都将是非常感激的。

html css select sass option
1个回答
2
投票

样式 <select> 标签,而不是 <option> 标签,你可以通过粘贴下面的代码看到这一点,你可以在这里看到更多。https:/www.w3schools.comhowtohowto_custom_select.asp

select{
    color: #fff;
    background-color:red;
    border:none;
    border-radius: 0.5em;
    padding: 2em;
    }

编辑,根据用户的要求来定制规格。

实现这一目的的方法是,在 "用户请求 "中指定一个属性。<option> 标签,它真的可以是 "任何东西",但有一些属性,如 selected 所以,如果你要在表单上使用这个功能,请确保你没有在所有的东西上都使用selected。

使用以下CSS

option{
    color: red;
}
[selected]{
 font-weight: 900;
 color: Green;
 background-color: pink;
}
[anything]{
color: blue;
 background-color: yellow;
}

有以下Html

<body>

<h1>The option element</h1>

<label for="cars">Choose a car:</label>

<select id="cars">
  <option selected value="volvo">Volvo</option>
  <option anything value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>

希望能解决这个问题!

© www.soinside.com 2019 - 2024. All rights reserved.