CSS3美化表单控件全集

表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用CSS3可以实现表单控件的美化，可以提供更好的用户体验。不足之处就是浏览器的兼容性问题。
 
一.下拉控件
 
效果图：

下拉控件的布局结构：

XML/HTML Code复制内容到剪贴板

<div class="container">  

        <div class="select">  

            <p>所有选项</p>  

            <ul>  

                <li class="selected" data-value="所有选项">所有选项</li>  

                <li data-value="Python">Python</li>  

                <li data-value="Javascript">Javascript</li>  

                <li data-value="Java">Java</li>  

                <li data-value="Ruby">Ruby</li>  

            </ul>  

        </div>  

    </div>    

ul用来模拟下拉列表，在实际的使用过程中，可以根据后台返回过来的数据动态生成。p元素用来渲染选中的选项。
 
核心样式：

CSS Code复制内容到剪贴板

.container .select{   

    width: 300px;   

    height: 40px;   

    font-size: 14px;   

    background-color:#fff;   

    margin-left: auto;   

    margin-right: auto;   

    position: relative;   

}   

/*下拉箭头的样式*/  

.container .select:after{   

    content: "";   

    display: block;   

    width: 10px;   

    height: 10px;   

    position: absolute;   

    top: 11px;   

    rightright: 12px;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!