选择箭头样式更改
我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的div中,我将选择的背景设置为透明,并且我在div的右上角包含一张图片(与箭头大小相同)作为背景.
它只适用于Chrome.
我怎样才能使它在Firefox和IE9中工作,我得到了这个:
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}<HTML>
<HEAD>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>Mor*_*eus 106
你尝试过这样的事情:
.styled-select select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
没有测试,但应该工作.
编辑:看起来Firefox在35版之前不支持此功能(在此处阅读更多内容)
有一种变通方法这里,看看jsfiddle该讯息.
Jul*_*ins 39
只使用一个类:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
http://jsfiddle.net/qhCsJ/4120/
- 如果您不想依赖为控件设置宽度，但仍想从右侧填充图像，则可以使用 calc：例如`background-position-x: calc( 100% - 5px ) ;` (3认同)
- Firefox不支持background-position-x,但它支持background-position (2认同)
- 惭愧这个答案需要这么多调整: - /但这是一个很好的起跑线. (2认同)
svn*_*vnm 37
我已经设置了一个select类似于Julio的答案的自定义箭头,但它没有设置宽度并使用svg背景图像作为背景图像.(arrow_drop_down来自material-ui图标)
select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border: 1px solid #dfdfdf;
border-radius: 2px;
margin-right: 2rem;
padding: 1rem;
padding-right: 2rem;
}
如果你需要它也可以在IE中更新svg箭头到base64并添加以下内容:
select::-ms-expand { display: none; }
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
- 您可以使用 ```background-position: top 5px right 4px;``` 更精确地定位箭头 (4认同)
- 压缩： `背景： url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% 无重复透明；` (3认同)
- @lobati您可以使用十六进制颜色。只需将哈希符号替换为“%23”即可。 (2认同)
Pet*_*nan 27
这是一个优雅的修复,使用跨度来显示值.
布局是这样的:
<div class="selectDiv">
<span class="selectDefault"></span>
<select name="txtCountry" class="selectBox">
<option class="defualt-text">-- Select Country --</option>
<option value="1">Abkhazia</option>
<option value="2">Afghanistan</option>
</select>
</div>
- 对于这个解决方案+1,这是我发现在IE9和旧浏览器上正确设置箭头样式的唯一方法.有很多网站只是说你不能在IE9和之前的选择框上设置样式,而是提供后备策略,但这个解决方案证明不是这样. (4认同)
- 值得一提的是:**这个解决方案需要javascript**,这个答案*没有标记为*. (3认同)
Sia*_*vas 17
这对于使用Bootstrap的用户来说效果很好,在最新的浏览器版本中测试过:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Some browsers will not display the caret when using calc, so we put the fallback first */
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>Md.*_*ana 11
我想澄清一些之前没有人提到过的事情。
- 首先获取您的
svg图像或图标 - 在那里你会得到一些像这样的 xml 代码，
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10.127L12 18.127L20 10.127H4Z" fill="#8E8E93"/> </svg>尝试找到它。 - 并在这段代码之后过去
data:image/svg+xml;utf8, - 将填充颜色替换
fill="#8E8E93"为此fill="%238E8E93"如果您想添加十六进制颜色，您应该更改#为%23
这是html代码：
<fieldset>
<label for="editName">Country</label>
<select class="ra-select">
<option value="bangladesh" selected>Bangladesh</option>
<option value="saudi arabia">Saudi Arabia</option>
<option value="us">Uinited State Of America</option>
<option value="india">India</option>
</select>
</fieldset>
这是CSS代码：
.ra-select {
width: 30%;
padding: 10px;
/* Replace Default styling (arrow) */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.127L12 18.127L20 10.127H4Z" fill="%238E8E93"/></svg>');
background-repeat: no-repeat;
background-position-y: 50%;
background-position-x: 98%;
}
.ra-select:focus,
.ra-select:hover {
outline: none;
border: 1px solid #bbb;
}
.ra-select option {
background-color: #fff;
}
Tee*_*muK 10
好吧，看来这里已经有很多答案了。有些可能比其他更好。如果有人绝望地向下滚动这里，这是我的两分钱：
如果您确实想设计下拉菜单的样式，请不要使用<select>. div里面有常规的<ul>就会灵活很多。但是，如果您真的坚持使用 select 因为您只想要最小的下拉菜单，那么这是我的：
select {
appearance: none;
background: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
border-radius: 2px;
padding: 0.25rem 2rem 0.25rem 0.75rem;
} <select>
<option value="bottom-right">Bottom right</option>
<option value="bottom-left">Bottom left</option>
<option value="top-right">Top right</option>
<option value="top-left">Top left</option>
</select>因此，关键部分是找到一个插入符号 svg，您可以将其 URL 转换为字符串。我可以稍微增强它，也许以某种方式旋转插入符号，但实际上 - 我很高兴它并不难看。
检查一下这很简单,很简单:
- 设置
-prefix-appearance以none删除样式 - 用于
text-indent将内容"推"到右侧 - 最后,设置
text-overflow为空字符串.超出它宽度的一切都将变成......没有!这包括箭头.
现在你可以随心所欲地设计风格:)
这是我的jsfiddle示例:http://jsfiddle.net/AEt5k/1/
/* FIX OF UGLY SELECT */
SELECT {
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
background-position: calc(100% - 0.75rem) center !important;
-moz-appearance:none !important;
-webkit-appearance: none !important;
appearance: none !important;
padding-right: 2rem !important;
}
调整变量以匹配您的表单样式。
铬合金：
火狐：
歌剧：
边缘：
ps 通过 Bootstrap 4 进行表单和输入设计
使用CSS设置标签样式并使用指针事件:
<label>
<select>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
</label>
和相对的CSS是
label:after {
content:'\25BC';
display:inline-block;
color:#000;
background-color:#fff;
margin-left:-17px; /* remove the damn :after space */
pointer-events:none; /* let the click pass trough */
}
我刚刚在这里使用了向下箭头,但您可以设置一个带有背景图像的块.这是一个丑陋的小提琴样本:https: //jsfiddle.net/1rofzz89/
小智 5
它可以在所有浏览器中使用：
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
background-position-x: 244px;
}
- 您不认为IE是浏览器。我不会为此而投票。 (7认同)
小智 5
只需这样做：
select {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) !important;
background-repeat: no-repeat !important;
background-position-x: 100% !important;
background-position-y: 50% !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
-ms-appearance: none !important;
-o-appearance: none !important;
appearance: none !important;
}
select::-ms-expand {
display: none;
}.select{
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 50%;
}