我想在一个选择框中添加一些样式,其中包含伪:after(用于选择包含2个部分且没有图像的选择框).这是HTML:
<select name="">
<option value="">Test</option>
</select>
Run Code Online (Sandbox Code Playgroud)
它不起作用.我不知道为什么,我没有在W3C规范中找到答案.这是CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
Run Code Online (Sandbox Code Playgroud)
这是正常还是有诀窍?
我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的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;
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)是否可以在下拉选择元素上设置向下箭头的样式?即,(<select><option>--></option></select>
)
我怀疑答案是否定的,因为IE处理特定元素的方式.如果没有办法,有没有人知道使用javaScript的'假'下拉框会模仿这种行为,但是我能够自定义吗?
NOT A DUPLICATE - 请仔细阅读并理解问题。我不想更换箭头。我想保持箭头的原样并改变它的位置。appearance:none
可以隐藏箭头并通过设置background:url()
我可以替换箭头,但这不是我的问题
我有一个看起来不错并且工作正常的下拉列表。我们都知道默认情况下它会在下拉列表的右侧添加一个下拉箭头。现在我想要做的是将箭头向下移动到像margin-top:5px
. 但我找不到任何pseudo elements
或classes
编写我的代码。我想仅使用css来实现这一点。我发现样式是为了隐藏元素并添加另一个元素,但在我的情况下,我想保持图标的原样并更改位置。
html
<select class="dropdown-select">
<option value="">Select Location</option>
<option value="location-1">Location 1</option>
<option value="location-2">Location 2</option>
<option value="location-3">Location 3</option>
</select>
Run Code Online (Sandbox Code Playgroud)
css
.dropdown-select{
outline: none;
border: none;
}
Run Code Online (Sandbox Code Playgroud)