下拉列表旁指下箭头及字体颜色等样式修改

这里不引用第三方类库，仅html+css设计。

预期效果如下图：网站的中英文切换下拉列表。

html下select标签本身效果不好看，故做更改。测试浏览器:Chrome.

更改思路：

1.select极其下拉列表字体设置：利用css相关属性，见代码；

2.关于select右边自带三角形改为白色：将原属select三角形设为不显示，在select外围包一层DIV，随后在其DIV旁边设计一个三角形白色DIV放旁边就可以了。

优点在于可以不引用第三方库，缺点是白色三角形点击没有反应，只能起到一个指向作用。

这里有个疑问，百度出来的用span标签在select标签外围包上，然后替换上一个三角形图片，我参考着做了，但是没法覆盖在select上面，不知道是哪个地方没设置好，

这个问题先记录着。

后续再研究下用bootstrap等方法进行设计。

如下html代码：

<div class="choseLanguage">
<div class="se">
<select class="selectLanguage">   
<option class="optionLangeuage">简体中文</option>
<option class="optionLangeuage">English</option>
</select>
</div>
<div class="trangle"></div><!--设置三角形白色DIV-->
</div>

 

如下css代码

.choseLanguage{
width:80px;
height:32px;
float:left;
text-align:right;
margin-left:40px;
margin-top:12px;
float:left;
font-size:14px;
}
.se{
width:70px;
height:32px;
float:left;
text-align:right;
float:left;
font-size:14px;
}
.trangle{
width: 0;
height: 0;
margin-top:5px;
margin-left:1px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #FFFFFF;
float:left;
}
.selectLanguage{
background-color:#1e4a7e;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
border:0;
border:none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
.optionLangeuage{
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}

 

转载于:https://www.cnblogs.com/fhychzu/p/5286704.html