zoukankan      html  css  js  c++  java
  • 图片-定义select向下箭头样式

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>图片-定义select向下箭头样式</title>
     6     </head>
     7     <style>
     8         * {
     9             margin: 0;
    10             padding: 0;
    11         }
    12 
    13         .icon-select1 {
    14             width: 100%;
    15             line-height: 40px;
    16             cursor: pointer;
    17             /*鼠标上移变成小手*/
    18             appearance: none;
    19             /*去掉默认的下拉三角*/
    20             -moz-appearance: none;
    21             -webkit-appearance: none;
    22             background: url("../img/icon.png") no-repeat right center transparent;/* 下拉箭头图片 */
    23             background-size: 15px 10px;/* 下拉箭头大小 */
    24             /*添加下拉三角图标*/
    25         }
    26     </style>
    27     <body>
    28         <select class="icon-select1">
    29             <option value="">查看详情</option>
    30             <option value="">方形</option>
    31             <option value="">圆形</option>
    32             <option value="">锥形</option>
    33         </select>
    34     </body>
    35 </html>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    1 let和const
    ECMAScript 6 扫盲
    回溯法
    13. Ajax技术
    12.JSTL标签
    11.EL(表达式语言)
    10.正则表达式(未完成)
    博客园自定义样式
    9.一次简单的Web作业
    8.JavaScript
  • 原文地址:https://www.cnblogs.com/antao/p/12375111.html
Copyright © 2011-2022 走看看