我使用的是wordpress主题,出于某种原因,HTML select
框没有下拉区域。它们看起来就像普通的input
文本框,但是当您单击它们时,您可以看到下拉列表。我无法找到哪些代码可能会删除下拉箭头。
这就是我在CSS中看到的所有内容:
input:focus {
outline: none;
}
select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius:0;
}
答案 0 :(得分:14)
这是一个基本选择
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
现在让我们看看你的问题在哪里:
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>
因此,当您将none
设置为appearance
时,您将删除箭头(默认情况下为menulist
),并将0
设置为border-radius
},您默认删除了border
的{{1}}。
注意如果您使用此规则select
隐藏了IE中的箭头以使箭头返回,则需要将其设置为select::-ms-expand { display: none; }
答案 1 :(得分:8)
您已覆盖-webkit-appearance
的{{1}}属性,该属性已被浏览器设置为select
默认值。
答案 2 :(得分:1)
答案对大多数人来说是正确的,但对我来说并不适用。这就是诀窍
select::-ms-expand { display: block; }
答案 3 :(得分:1)
您可以将select
包裹在div
中,然后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;
}
答案 4 :(得分:0)
我已尝试过以上解决方案,但它不适用于使用jquery.min.css
创建的UI。我试过下面的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;
}
答案 5 :(得分:0)
我也遇到了同样的问题,添加了以下jquery文件jquery-3.4.1.js后出现了下拉箭头
<script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">
答案 6 :(得分:-2)
not_if "knife ssl check <url>".
select {
-webkit-appearance: none;
/*webkit browsers */
-moz-appearance: none;
/*Firefox */
appearance: none;
/* modern browsers */
border-radius: 0;
}