我使用的是WordPress主题,由于某种原因,HTML的select元素看起来像普通的input字段;不过,当您单击它们时,可以看到下拉列表。我找不到什么代码可能会剥离下拉箭头。下面是我在CSS中看到的内容。
select
input
input:focus { outline: none; } select, input, textarea { -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; }
nbewdwxp1#
选择的答案对大多数人来说都是正确的,但对我来说不起作用。然而,下面的代码行却起了作用。
select::-ms-expand { display: block; }
p1tboqfb2#
我已经尝试了上述解决方案,但它不工作的UI,这是用jquery.min.css创建的。我已经尝试了下面的css,它解决了我的问题。这里我的目标.ui-icon-carat-d,它显示下拉箭头和设置下拉图标有:
jquery.min.css
.ui-icon-carat-d
.ui-icon-carat-d:after{ background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important; background-repeat: no-repeat !important; background-color: #fff !important; }
flvtvl503#
我也遇到了同样的问题,添加下面的jquery文件jquery-3.4.1.js后出现了下拉箭头
<script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">
bhmjp9jg4#
select { -webkit-appearance: none; /*webkit browsers */ -moz-appearance: none; /*Firefox */ appearance: none; /* modern browsers */ border-radius: 0; }
<select> <option>1</option> <option>2</option> <option>3</option> </select>
1cosmwyk5#
下面是一个基本的select元素及其选项。
现在,让我们来看看您的问题所在:x一个一个一个一个x一个一个二个x默认情况下,将none设置为appearance时,将删除箭头;将0设置为border-radius时,将删除select的border。可以通过将appearance设置为menulist(即默认值)、listbox或auto来恢复箭头。
none
appearance
0
border-radius
border
menulist
listbox
auto
select::-ms-expand { display: none; }
display: block
cgfeq70w6#
您已经覆盖了select的-webkit-appearance属性,许多浏览器将该属性的默认值设置为-webkit-appearance: menulist;。
-webkit-appearance
-webkit-appearance: menulist;
hrysbysz7#
我知道我回答这个问题晚了,但是我下面的CSS解决方案对我很有效。对别人可能会有帮助。
select { -webkit-appearance: listbox !important; }
8tntrjer8#
你可以把select Package 成一个div,在这个div上你可以给予::after元素和样式:
div
::after
div:after{ position: absolute; top: 4px; right: 10px; color: #768093; font-family: #whichever font you wanna use# e.g Fontawesome; font-size: 20px; content: "\e842"; } div:after{ position: absolute; visibility: visible; font-family: FontAwesome; content: "\f096"; font-size: 18px; }
8条答案
按热度按时间nbewdwxp1#
选择的答案对大多数人来说都是正确的,但对我来说不起作用。然而,下面的代码行却起了作用。
p1tboqfb2#
我已经尝试了上述解决方案,但它不工作的UI,这是用
jquery.min.css
创建的。我已经尝试了下面的css,它解决了我的问题。这里我的目标.ui-icon-carat-d
,它显示下拉箭头和设置下拉图标有:flvtvl503#
我也遇到了同样的问题,添加下面的jquery文件jquery-3.4.1.js后出现了下拉箭头
bhmjp9jg4#
1cosmwyk5#
下面是一个基本的select元素及其选项。
现在,让我们来看看您的问题所在:
x一个一个一个一个x一个一个二个x
默认情况下,将
none
设置为appearance
时,将删除箭头;将0
设置为border-radius
时,将删除select
的border
。可以通过将
appearance
设置为menulist
(即默认值)、listbox
或auto
来恢复箭头。select::-ms-expand { display: none; }
规则在IE中隐藏了箭头,则需要将其设置为display: block
才能恢复箭头。cgfeq70w6#
您已经覆盖了
select
的-webkit-appearance
属性,许多浏览器将该属性的默认值设置为-webkit-appearance: menulist;
。hrysbysz7#
我知道我回答这个问题晚了,但是我下面的CSS解决方案对我很有效。
对别人可能会有帮助。
8tntrjer8#
你可以把
select
Package 成一个div
,在这个div
上你可以给予::after
元素和样式: