首頁 > web前端 > html教學 > css3实现模拟select 以及其中的三角形_html/css_WEB-ITnose

css3实现模拟select 以及其中的三角形_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:07:32
原創
1199 人瀏覽過

如图实现这样的效果:

html代码如下:

<div class="select-bg">                         <select class="select-green">        <option value="">高级客户经理</option>        <option value="">中级客户经理</option>    </select>  </div>
登入後複製

css样式代码:

.select-bg{    display:block;    width:200px;    margin:0 auto;    height: 30px;    line-height: 37px;    font-size: 13px;    border:1px #0f7fc7 solid ;    box-sizing:border-box;    cursor: pointer;    position: relative;}.select-bg:after{    content:' ';    position: absolute;    right:6px;    top:50%;    margin-top:-5px;    width:0px;      height:0px;      border-left:10px solid transparent;      border-right:10px solid transparent;      border-top:10px solid #0f7fc7;    font-size:0px;    line-height:0px}.select-green {    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    position: relative;    outline: none;    border: 0 none;    position: relative;    padding: 0 0 0 5px;    width: 100%;    color:#0f7fc7;    font-weight: bold;    background: none;    background-color: transparent;    font-size: 13px;    z-index: 99;    overflow: hidden;}
登入後複製

需要demo猛点该文字,百度云盘下载

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板