css 选择/自定义下拉箭头上的自定义箭头|标签的CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 选择/自定义下拉箭头上的自定义箭头|标签的CSS相关的知识，希望对你有一定的参考价值。

div class="cust-sel cust-sel-1">
			<select>
					<option value="1">Lorem ipsum.</option>
					<option value="2">Sunt, nesciunt.</option>
					<option value="3">Repellendus, nostrum.</option>
			</select>
</div>
<br>
<div class="cust-sel cust-sel-2">
			<select>
					<option value="volvo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="mercedes">Mercedes</option>
					<option value="audi">Audi</option>
			</select>
</div>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

	

	
.cust-sel{
  position: relative;
  display:block;

}

.cust-sel::after{
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  margin:auto 0;
}
.cust-sel select{
  padding: 5px 20px 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:block;
  width:100%;
}
.cust-sel select::-ms-expand {
  display: none;
}

/* Types of Arrows */
.cust-sel-1::after{
  right: 8px;
  width: 0;
  height:0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5591dc;
  pointer-events: none;
}
.cust-sel-2::after{
  right: 8px;
  height:7px;
  width:7px;
  border:2px solid #5591dc;
  border-left: none;
  border-top: none;
  background-color:transparent;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  border-radius:0 0 1px 0;
  pointer-events: none;
}

    </style>
</head>

<body>
    <div class="cust-sel cust-sel-1">
        <select>
            <option value="1">Lorem ipsum.</option>
            <option value="2">Sunt, nesciunt.</option>
            <option value="3">Repellendus, nostrum.</option>
        </select>
    </div>
    <br>
    <div class="cust-sel cust-sel-2">
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
</body>

</html>


.cust-sel{
  position: relative;
  display:block;

}

.cust-sel::after{
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  margin:auto 0;
}
.cust-sel select{
  padding: 5px 20px 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:block;
  width:100%;
}
.cust-sel select::-ms-expand {
  display: none;
}

/* Types of Arrows */
.cust-sel-1::after{
  right: 8px;
  width: 0;
  height:0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5591dc;
  pointer-events: none;
}
.cust-sel-2::after{
  right: 8px;
  height:7px;
  width:7px;
  border:2px solid #5591dc;
  border-left: none;
  border-top: none;
  background-color:transparent;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  border-radius:0 0 1px 0;
  pointer-events: none;
}

以上是关于css 选择/自定义下拉箭头上的自定义箭头|标签的CSS的主要内容，如果未能解决你的问题，请参考以下文章

CSS怎么去掉select的下拉箭头样式

pyqtgraph中带有箭头的自定义LinearRegionItem

CSS怎么去掉select的下拉箭头样式

光滑的滑块同步 - 断点上的自定义箭头

无法让原始选择下拉箭头在 Mozilla 中消失

IE & Firefox - 自定义下拉菜单无法移除原生箭头