选择不在chrome中工作的选项填充
<style>
select option { padding:5px 0px; }
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Run Code Online (Sandbox Code Playgroud) 我试图将第一个选项的颜色更改为灰色,只有文本(选择一个选项),但这里它不起作用:
.grey_color {
color: #ccc;
font-size: 14px;
}Run Code Online (Sandbox Code Playgroud)
<select id="select">
<option selected="selected"><span class="grey_color">select one option</span></option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option >five</option>
</select>Run Code Online (Sandbox Code Playgroud)
我的jsfiddle在这里是jsfiddle
如何在HTML选择列表中设置项目的背景颜色?
我把这个小提琴作为我正在做的事情的一个例子.
我想要做的是在Firefox中正常工作.随着字体大小存在14px的,当你打开选择选项.
然而,在谷歌浏览器在看它,它挑选的继承字体大小34像素.
我理想地寻找选择选项为字体大小14px.
这可能吗?
如果需要,我愿意在jQuery中做任何相关的修复.
谢谢
代码列在下面......
我的CSS是:
.styled-select {
overflow: hidden;
height: 74px;
float: left;
width: 365px;
margin-right: 10px;
background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c;
}
.styled-select select {
font-size: 34px;
border-radius: 0;
border: none;
background: transparent;
width: 380px;
overflow: hidden;
padding-top: 15px;
height: 70px;
text-indent: 10px;
color: #ffffff;
-webkit-appearance: none;
}
.styled-select option.service-small {
font-size: 14px;
padding: 5px;
background: #5c5c5c;
}
Run Code Online (Sandbox Code Playgroud)
HTML标记:
<div class="styled-select">
<select class="service-area" …Run Code Online (Sandbox Code Playgroud) 我正在尝试设置选择选项下拉列表的样式.是否可以使选项的字体大小与默认值不同?例如,默认值:
-- Select Country --
Run Code Online (Sandbox Code Playgroud)
尺寸为7pt; 和其中一个选项,
Georgia
Run Code Online (Sandbox Code Playgroud)
尺寸为13pt.
这是我的下拉列表:
.select_join {
width: 170px;
height: 28px;
overflow: hidden;
background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
border: #FEFEFE 1px solid;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
background: transparent;
width: 170px;
font-size:7pt;
color:grey;
border: 0;
border-radius: 0;
height: 28px;
-webkit-appearance: none;
}
.select_join select:focus {
outline: none;
}Run Code Online (Sandbox Code Playgroud)
<div style="background-color:pink;height:150px; text-align:center;">
<br/>
<div class="select_join" style="margin-left:15px">
<select name="txtCountry">
<option>-- …Run Code Online (Sandbox Code Playgroud)看看这个简单的小提琴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;
}
Run Code Online (Sandbox Code Playgroud) 此 html 仅在 chrome 中使所选值不可见,在其他浏览器中选择的背景是彩色的,只有在 chrome 中它是白色的
<HTML>
<head>
<title>
title
</title>
<link id="siteThemeLink" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/excite-bike/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<select class='ui-state-error'>
<option>hi</option>
<option>hi</option>
<option>hi</option>
</select>
</body>
</HTML>
Run Code Online (Sandbox Code Playgroud)
有人知道修复吗?
考虑以下示例:( 现场演示)
HTML:
<select>
<option>Hello</option>
<option>Stack</option>
<option class="a">Overflow</option>
</select>
Run Code Online (Sandbox Code Playgroud)
CSS:
option.a {
background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
在Chrome 17中的Windows上,样式按预期工作:

虽然在Chrome 17的Mac上它不起作用:

有关如何<option>在Mac上添加背景颜色的任何想法?
font-weight : bold 不适用于Internet Explorer中的HTML SELECT选项,还有其他方法可以在HTML SELECT选项上指定粗体类型属性。
<select ng-model="fields[filter.id]" style="width:200px;">
<option value="">--- Select ---</option>
<option ng-repeat="field in filter.fields" ng-disabled="!(field.selectable)" value="{{field.id}}" ng-class="{true:'test1', false:'test'}[field.selectable]" >{{field.label}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)
对应的CSS样式:
<style>
.test {
color:black !important;
font-weight:bold !important;
}
.test1 {
margin-left:10px !important;
}
</style>
Run Code Online (Sandbox Code Playgroud)
这些CSS样式可在Firefox中使用,但在chrome和IE中无效:(
我想知道是否有任何方法可以将选项文本的一部分对齐.
你可以看到我有一个选择,左边有一些名字,右边有"(垂直)".我需要向右拉"(垂直)".有没有办法做到这一点?
<select name="IM_COD_CONDOMINIO" id="IM_COD_CONDOMINIO" class="form-control ">
<option value="add">Inserir novo</option>
<option value="">Selecione</option>
<option value="822">2000 (vertical)</option>
<option value="455">Abaete (vertical)</option>
<option value="456">Acapulco (vertical)</option>
<option value="457">Aconcagua (vertical)</option>
<option value="458">Acqua (vertical)</option>
<option value="459">Acqua Di Firenze (vertical)</option>
<option value="460">Acquamarine (vertical)</option>
<option value="461">Acre (vertical)</option>
<option value="462">Adalberto Lima (vertical)</option>
<option value="463">Adamatti (vertical)</option>
<option value="1833">Adriático (vertical)</option>
<option value="464">Agata (vertical)</option>
<option value="1106">Aguas Claras (vertical)</option>
<option value="1144">Agueda (vertical)</option>
<option value="465">Aimore (vertical)</option>
<option value="466">Alamo (vertical)</option>
<option value="1864">Albatroz (vertical)</option>
<option value="1720">Alê (vertical)</option>
<option value="467">Alexandre (vertical)</option>
</select>Run Code Online (Sandbox Code Playgroud)
更新:这个问题不重复,因为我没有尝试将完整代码对齐,或者添加一些样式来选择.我试图将部分文本对齐左边,将其他部分对齐.
我的代码中有这一行:
<label style="font-weight: bold" for="sedii18n_codice_paese_indirizzo">Codice paese indirizzo</label>
Run Code Online (Sandbox Code Playgroud)
但标签显示正常.
如果我转到Chrome Inspector,我可以看到:
font-weight: normal !important;
Run Code Online (Sandbox Code Playgroud)
如果我font-weight在检查器中更改,则会正常修改字体的重量.