问答详情
源自:6-10 使用select、option标签创建下拉菜单

select修改三角默认样式

下拉标签右侧小三角怎么修改样式???

提问者:草莓欧巴 2016-12-08 11:40

个回答

  • 6亿少女的梦
    2016-12-08 11:56:37
    已采纳

    原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。

    select {
     /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
     border: solid 1px #000;

     /*很关键:将默认的select选择框样式清除*/
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;

     /*在选择框的最右侧中间显示小箭头图片*/
     background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


     /*为下拉小箭头留出一点位置,避免被文字覆盖*/
     padding-right: 14px;
    }


    /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
    select::-ms-expand { display: none; }


  • shihao丶H
    2016-12-08 13:23:05

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

    border: solid 1px #000;

    .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;

    }

    </style>

    </head>


    <body>

    <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>

    </body>

    </html>




    这是在http://www.cnblogs.com/fhychzu/p/5286704.html复制出的代码,我把它的样式清除注释了之后就能看到那个三角箭头了

  • shihao丶H
    2016-12-08 12:49:15

    select 不能修改三角样式吧


  • 草莓欧巴
    2016-12-08 11:53:40

    找到了

    先清除样式:

    appearance:none; 

      -moz-appearance:none; 

      -webkit-appearance:none;