您现在的位置是：网站首页> 编程资料编程资料

CSS3美化表单控件全集_css3_CSS_网页制作_

2023-10-07 383人已围观

简介 这篇文章主要为大家详细介绍了CSS3美化表单控件的技巧，美化下拉控件、单选框、复选框，感兴趣的小伙伴们可以参考一下

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

 

下拉控件的布局结构：

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <div class="select">  
  3.             <p>所有选项p>  
  4.             <ul>  
  5.                 <li class="selected" data-value="所有选项">所有选项li>  
  6.                 <li data-value="Python">Pythonli>  
  7.                 <li data-value="Javascript">Javascriptli>  
  8.                 <li data-value="Java">Javali>  
  9.                 <li data-value="Ruby">Rubyli>  
  10.             ul>  
  11.         div>  
  12.     div>    
  13.   

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

CSS Code复制内容到剪贴板
  1. .container .select{   
  2.     width: 300px;   
  3.     height: 40px;   
  4.     font-size: 14px;   
  5.     background-color:#fff;   
  6.     margin-left: auto;   
  7.     margin-right: auto;   
  8.     position: relative;   
  9. }   
  10. /*下拉箭头的样式*/  
  11. .container .select:after{   
  12.     content: "";   
  13.     display: block;   
  14.     width: 10px;   
  15.     height: 10px;   
  16.     position: absolute;   
  17.     top: 11px;   
  18.     rightright: 12px;   
  19.     border-left: 1px solid #ccc;   
  20.     border-bottom: 1px solid #ccc;   
  21.     -webkit-transform: rotate(-45deg);   
  22.     transform: rotate(-45deg);   
  23.     -webkit-transition: transform .2s ease-in, top .2s ease-in;   
  24.     transition: transform .2s ease-in, top .2s ease-in;   
  25. }   
  26. /*  
  27.     被选中的列表项显示的区域  
  28. */  
  29. .container .select p{   
  30.     padding: 0 15px;   
  31.     line-height: 40px;   
  32.     cursor: pointer;   
  33. }   
  34. /*  
  35.     下拉列表的样式  
  36.     默认高度为0  
  37. */  
  38. .contai

    上一篇：CSS3字体效果的设置方法小结_css3_CSS_网页制作_

    下一篇：CSS3+DIV实现漂亮的动画彩色标签_css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网