相关疑难解决方法(0)

选择不在chrome中工作的选项填充

选择不在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)

html css

73
推荐指数
5
解决办法
16万
查看次数

如何更改选择框的选项文本的颜色?

我试图将第一个选项的颜色更改为灰色,只有文本(选择一个选项),但这里它不起作用:

.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 css

39
推荐指数
4
解决办法
22万
查看次数

33
推荐指数
2
解决办法
12万
查看次数

选择选项font-size

我把这个小提琴作为我正在做的事情的一个例子.

我想要做的是在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)

html css

27
推荐指数
2
解决办法
16万
查看次数

如何更改选择选项的字体大小?

我正在尝试设置选择选项下拉列表的样式.是否可以使选项的字体大小与默认值不同?例如,默认值:

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

css html-select font-size css3

16
推荐指数
2
解决办法
27万
查看次数

HTML/CSS:select标签内的浮动选项标签

看看这个简单的小提琴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 css

7
推荐指数
1
解决办法
1329
查看次数

在 Chrome 中查看时选择框中的白色背景

此 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 css jquery select google-chrome

5
推荐指数
1
解决办法
1万
查看次数

如何为HTML选项添加背景颜色?

考虑以下示例:( 现场演示)

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上添加背景颜色的任何想法?

html css html-select background-color

5
推荐指数
1
解决办法
5464
查看次数

HTML SELECT的OPTION上的HTML字体粗细属性

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中无效:(

html css internet-explorer css3

5
推荐指数
1
解决办法
2万
查看次数

选择右侧部分文本对齐

我想知道是否有任何方法可以将选项文本的一部分对齐.

你可以看到我有一个选择,左边有一些名字,右边有"(垂直)".我需要向右拉"(垂直)".有没有办法做到这一点?

在此输入图像描述

<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="455">Abaete&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="456">Acapulco&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="457">Aconcagua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="458">Acqua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="459">Acqua Di Firenze&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="460">Acquamarine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="461">Acre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="462">Adalberto Lima&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="463">Adamatti&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1833">Adriático&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="464">Agata&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1106">Aguas Claras&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1144">Agueda&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="465">Aimore&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="466">Alamo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1864">Albatroz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1720">Alê&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="467">Alexandre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
</select>
Run Code Online (Sandbox Code Playgroud)

更新:这个问题不重复,因为我没有尝试将完整代码对齐,或者添加一些样式来选择.我试图将部分文本对齐左边,将其他部分对齐.

html css html5 alignment css3

5
推荐指数
1
解决办法
101
查看次数

字体粗细不适用于Chrome中的标签

我的代码中有这一行:

<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在检查器中更改,则会正常修改字体的重量.

css fonts google-chrome

4
推荐指数
1
解决办法
2万
查看次数