相关疑难解决方法(0)

如何使用CSS设置<select>下拉列表的样式?

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

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

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

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

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

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

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

这一次在Doctype.com.

html css combobox cross-browser skinning

1258
推荐指数
19
解决办法
155万
查看次数

如何使用CSS设置<option>的样式?

注意:此问题与制作自定义下拉列表无关.它只是关于<option>CSS中select元素中样式元素的可能性

如何使用跨浏览器兼容性<option>来设置<select>元素的样式?我知道很多JavaScript方法可以自定义下拉列表以进行转换<li>,我不会问.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>
Run Code Online (Sandbox Code Playgroud)

我问的是,只有CSS可以实现什么,兼容IE9 +,Firefox和Chrome.

在此输入图像描述

我希望这样或尽可能接近样式.

在此输入图像描述

我在这里试过http://jsfiddle.net/jitendravyas/juwz3/3/,但除了字体颜色外,Chrome没有显示任何样式,而Firefox则显示更多.如何在Chrome中获得边框和填充功能?

css html-select css3

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

更改下拉箭头的颜色和外观

我想更改下拉列表箭头的默认外观,以便在浏览器中看起来相同.有没有办法使用CSS或其他方式覆盖下拉箭头的默认外观?

css drop-down-menu

64
推荐指数
3
解决办法
25万
查看次数

如何更改选择框箭头

我需要你的帮助.

我似乎无法绕过这个并想出来.如何在选择框中更改默认的Windows 7,IE 10默认箭头:在此输入图像描述 使用下面的自定义箭头使其看起来像这样:在此输入图像描述.

这是我想要使用的箭头:在此输入图像描述

这是我的HTML标记:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
   select { font: normal 13px Arial; color: #000;}
   .container {
         border: 1px solid red;
         position: relative; width: 124px; height: 18px; overflow: hidden;
    }
   .inpSelect {
        color: black; background: #ffa;
        position: absolute; width: 128px; top: -2px; left: -2px;
    }
   </style>

<script type="text/javascript">
</script>

</head>

<body>

<div class="container">
    <select class="inpSelect" name="xxx">
        <option value="0" selected="selected">actual browser</option>
        <option value="1">IE</option>
        <option value="2">Firefox</option>
        <option value="3">Opera</option>
        <option value="4">Safari</option>
    </select>
</div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

html css html5 select css3

41
推荐指数
3
解决办法
23万
查看次数

如何在Chrome中使选择元素变得透明?

请看这个例子:

select {
  width: 172px;
  height: 22px;
  padding: 2px 7px;
  border: none;
  background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}
Run Code Online (Sandbox Code Playgroud)
<select>
  <option value="abcdefg">abcdefg</option>
  <option value="1234567">1234567</option>
  <option value="abcdefg">abcdefg</option>
</select>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/jeafgilbert/wz0zaev0/

有人可以将其更新为在Chrome中透明吗?目前FF中的结果是正确的.谢谢.

更新:

现在-webkit-appearance: none;Chrome 无法正常使用.

css select google-chrome

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

如何在CSS的选择输入字段中创建向上/向下箭头?

我正在建立一个网站(基于Wordpress,自定义主题),我想在CSS中的选择输入字段中添加/向下箭头.我用来为选择输入字段创建向上/向下箭头的HTML代码是:

<p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>
Run Code Online (Sandbox Code Playgroud)

以下代码是完整的小提琴https://jsfiddle.net/ovp8Lxjw/4/embedded/result.此刻,它只有向下箭头.

在上面的小提琴中,我想添加蓝色的上/下箭头.此时,它仅显示向下箭头.

问题陈述:

我想知道我需要在上面的小提琴中添加什么CSS代码,以便我可以在css的select输入字段中看到上/下箭头(如下面的屏幕截图所示,用箭头标记).我不能对HTML代码进行任何更改,因为它来自wordpress 网站的检查.

在此输入图像描述

html javascript css wordpress jquery

7
推荐指数
2
解决办法
5760
查看次数

css 如何在 Safari 上选择相同的 Chrome

我有一个这样的选择:

<select id="sbInBreak2_hh" name="sbInBreak2_hh">
	<option value="0">00</option>
	<option value="1">01</option>
	<option value="2">02</option>
	<option value="3">03</option>
	<option value="4">04</option>
	<option value="5">05</option>
	<option value="6">06</option>
	<option value="7">07</option>
	<option value="8">08</option>
	<option value="9">09</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	<option value="21">21</option>
	<option value="22">22</option>
	<option value="23">23</option>
</select>
Run Code Online (Sandbox Code Playgroud)

在 Chrome 上没问题,PM 要求我在 Safari 和 IE 上显示在 Chrome 上相同吗?css怎么可以呢?

在 Chrome 上

在此输入图像描述

在 Safari 和 IE 上

在此输入图像描述

html javascript css

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

HTML CSS改变SELECT ARROW的颜色

我想将SELECT箭头的颜色更改为蓝色.

有一个简单的方法吗?

选择框

html css

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