CSS - 更改下拉箭头到unicode三角形 [英] CSS - change dropdown arrow to unicode triangle

问题描述

我是使用CSS的初学者。我已经使用如下定制了< select> ：

  background-color：#ececec; 
 border：0; 
 border：1px solid＃e3e3e3; 
 border-radius：3px; 
 width：100％; 
 font-family：'FuturaStdLightOblique'，sans-serif; 
 font-size：16px; 
 color：＃616263; 
 outline：none; 
 height：40px; 
  

但我也想把下拉箭头改成符合这个设计的外观。我想使用unicode三角形▼（&＃9660; ）作为向下箭头的替代，如果可能，请将其设置为与文本相同的颜色我的选择标签。

有关如何实现这一点，没有使用任何东西除了CSS / HTML的任何想法？提前感谢。

解决方案

=snippetdata-lang =jsdata-hide =false>

  .select {border：1px solid＃e3e3e3; border-radius：3px;颜色：＃616263; overflow：hidden; height：40px; width：240px;位置：相对; display：block;} select {height：40px; padding：5px; background-color：#ececec; border：0; outline：none; font-size：16px; width：240px; -webkit-appearance：none; -moz-appearance：none;外观：无;}。选择：after {content：▼; padding：12px 8px; position：absolute; right：10px; top：0; z-index：1; text-align：center;宽度：10％;高度：100％; pointer-events：none; box-sizing：border-box; }  

 < div class =select> < select name =select> < option>选择< / option> < option>选项< / option> < option>选项< / option> < option>选项< / option> < option>选项< / option> < option>选项< / option> < option>选项< / option> < / select>< / div>  

I'm a beginner in using CSS. I've customized my <select> using like this:

background-color:#ececec;
border:0;
border:1px solid #e3e3e3;
border-radius:3px;
width:100%;
font-family:'FuturaStdLightOblique', sans-serif;
font-size:16px;
color:#616263;
outline:none;
height: 40px;

But I also want to change my dropdown arrow into a look that fits this design. I would like to use the unicode triangle ▼ (▼) as an alternative to the arrow down and if possible, set it to the same color as the texts in my select tag.

Any ideas on how I can achieve this without using anything aside from CSS/HTML? Thanks in advance.

解决方案

maybe so?

.select {
    border:1px solid #e3e3e3;    
    border-radius:3px;
    color:#616263;
    overflow: hidden; 
    height: 40px;    
    width: 240px;
    position: relative;
    display: block;
}

select{       
    height: 40px;
    padding: 5px;
    background-color:#ececec;
    border: 0;
    outline: none;
    font-size: 16px;       
    width: 240px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select:after {
    content:"▼";    
    padding: 12px 8px;
    position: absolute; right: 10px; top: 0;    
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;      
    pointer-events: none;
    box-sizing: border-box;   
}

<div class="select">
    <select name="select">
        <option>select</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
        <option>option</option>
    </select>
</div>

这篇关于CSS - 更改下拉箭头到unicode三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！