开心学习
当前位置：Web前端 > > 正文

css3表单怎么设置大小（CSS3美化表单控件全集）

时间：2022-01-15 01:59:02类别：Web前端

css3表单怎么设置大小

CSS3美化表单控件全集

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

css3表单怎么设置大小（CSS3美化表单控件全集）

下拉控件的布局结构：

  • XML/HTML Code复制内容到剪贴板
    1. <li class="container">  
    2.         <li class="select">  
    3.             <p>所有选项</p>  
    4.             <ul>  
    5.                 <li class="selected" data-value="所有选项">所有选项</li>  
    6.                 <li data-value="Python">Python</li>  
    7.                 <li data-value="Javascript">Javascript</li>  
    8.                 <li data-value="Java">Java</li>  
    9.                 <li data-value="Ruby">Ruby</li>  
    10.             </ul>  
    11.         </li>  
    12.     </li>    
    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. .container .select ul{   
    39.     list-style: none;   
    40.     background-color: #fff;   
    41.     width: 100%;   
    42.     overflow-y: auto;   
    43.     position: absolute;   
    44.     top: 40px;   
    45.     left: 0;   
    46.     max-height:0;   
    47.     -webkit-transition: max-height .3s ease-in;   
    48.     transition: max-height .3s ease-in;   
    49. }   
    50. .container .select ul li{   
    51.     padding: 0 15px;   
    52.     line-height: 40px;   
    53.     cursor: pointer;   
    54. }   
    55.   
    56. .container .select ul li:hover{   
    57.     background-color: #e0e0e0;   
    58. }   
    59. .container .select ul li.selected{   
    60.     background-color: #39f;   
    61.     color: #fff;   
    62.   
    63. }   
    64. /*下拉控件动画*/  
    65. @-webkit-keyframes slide-down{   
    66.     0%{   
    67.         -webkit-transform: scale(1, 0);   
    68.         transform: scale(1, 0);   
    69.     }   
    70.     25%{   
    71.         -webkit-transform: scale(1, 1.2);   
    72.         transform: scale(1, 1.2);   
    73.     }   
    74.     50%{   
    75.         -webkit-transform: scale(1, .85);   
    76.         transform: scale(1, .85);   
    77.     }   
    78.     75%{   
    79.         -webkit-transform: scale(1, 1.05);   
    80.         transform: scale(1, 1.05);   
    81.     }   
    82.     100%{   
    83.         -webkit-transform: scale(1, 1);   
    84.         transform: scale(1, 1);   
    85.     }   
    86. }   
    87. @keyframes slide-down{   
    88.     0%{   
    89.         -webkit-transform: scale(1, 0);   
    90.         transform: scale(1, 0);   
    91.     }   
    92.     25%{   
    93.         -webkit-transform: scale(1, 1.2);   
    94.         transform: scale(1, 1.2);   
    95.     }   
    96.     50%{   
    97.         -webkit-transform: scale(1, .85);   
    98.         transform: scale(1, .85);   
    99.     }   
    100.     75%{   
    101.         -webkit-transform: scale(1, 1.05);   
    102.         transform: scale(1, 1.05);   
    103.     }   
    104.     100%{   
    105.         -webkit-transform: scale(1, 1);   
    106.         transform: scale(1, 1);   
    107.     }   
    108. }   
    109. .container .select.on ul{   
    110.     /*  
    111.         默认情况下,ul的高度为0,当点击控控件的时候,  
    112.         设置下拉列表的高度。  
    113.     */  
    114.     max-height: 300px;   
    115.     -webkit-transform-origin: 50% 0;   
    116.     transform-origin: 50% 0;   
    117.     -webkit-animation: slide-down .5s ease-in;   
    118.     animation: slide-down .5s ease-in;   
    119. }   
    120. /*下拉选项被选中后控制箭头的方向*/  
    121. .container .select.on:after{   
    122.     -webkit-transform: rotate(-225deg);   
    123.     transform: rotate(-225deg);   
    124.     top: 18px;   
    125. }    
    126.   

    • 这里只是静态的样式，如果要实现“选择”这个过程，需要用到JavaScript来实现。

  • JavaScript Code复制内容到剪贴板
    1. $(function(){   
    2.     var selected  = $('.select > p');   
    3.     //控制列表显隐   
    4.     selected.on('click', function(event){   
    5.         $(this).parent('.select').toggleClass('on');   
    6.         event.stopPropagation();   
    7.     });   
    8.     //点击列表项,将列表项的值添加到p标签中   
    9.     $('.select li').on('click', function(event){   
    10.         var self = $(this);   
    11.         selected.text(self.data('value'));   
    12.     });   
    13.     //点击文档其他区域隐藏列表   
    14.     $(document).on('click', function(){   
    15.         $('.select').removeClass('on');   
    16.     });   
    17. });    
    18.   

    • 二.美化单选框
     
    lable标签可以通过for属性与单选框实现联动。我们利用这一特性来实现美化单选框，这也是原理所在。还有就是别忘了将真正的单选框(type="radio")隐藏掉。

  • CSS Code复制内容到剪贴板
    1. /*用过label标签来模拟radio 的样式*/  
    2. .radio-block label{   
    3.     display: inline-block;   
    4.     position: relative;   
    5.     width: 28px;   
    6.     height: 28px;   
    7.     border: 1px solid #cccccc;   
    8.     background-color: #fff;   
    9.     border-radius: 28px;   
    10.     cursor: pointer;   
    11.     margin-right:10px;   
    12. }   
    13.   
    14. input[type="radio"]{   
    15.     display: none;   
    16. }   
    17. .radio-block label:after{   
    18.     content: '';   
    19.     display: block;   
    20.     position: absolute;   
    21.     width: 20px;   
    22.     height: 20px;   
    23.     left: 4px;   
    24.     top: 4px;   
    25.     background-color: #28bd12;   
    26.     border-radius: 20px;   
    27.     /*通过scale属性来控制中心点*/  
    28.     -webkit-transform: scale(0);   
    29.     transform: scale(0);   
    30. }   
    31. /*选中样式*/  
    32. input[type="radio"]:checked + label{   
    33.     background-color :#eee;   
    34.     -webkit-transition: background-color .3s ease-in;   
    35.     transition: background-color .3s ease-in;   
    36. }   
    37. /*选中之后的样式*/  
    38. input[type="radio"]:checked + label:after{   
    39.     -webkit-transform: scale(1);   
    40.     transform: scale(1);   
    41.     -webkit-transition: transform .2s ease-in;   
    42.     transition: transform .2s ease-in;   
    43. }    
    44.   

    • 最后效果：

    css3表单怎么设置大小（CSS3美化表单控件全集）

    三.美化复选框

    css3表单怎么设置大小（CSS3美化表单控件全集）

    原理和单选框的制作方式类似。在checked的时候该表圆形的left值和label的背景。

  • CSS Code复制内容到剪贴板
    1. .switch-block{   
    2.     width: 980px;   
    3.     padding: 3% 0;   
    4.     margin: 0 auto;   
    5.     text-align: center;   
    6.     background-color: #fc9;   
    7. }   
    8. .switch-block label{   
    9.     display: inline-block;   
    10.     width: 62px;   
    11.     height: 30px;   
    12.     background-color:#fafafa;   
    13.     border:1px solid #eee;   
    14.     border-radius: 16px;   
    15.     position: relative;   
    16.     margin-right: 10px;   
    17.     cursor: pointer;   
    18.     -webkit-transition: background .2s ease-in;   
    19.     transition :background .2s ease-in;   
    20. }   
    21. input[type="checkbox"]{   
    22.     display: none;   
    23. }   
    24. .switch-block label:after{   
    25.     content: '';   
    26.     position: absolute;   
    27.     width: 28px;   
    28.     height: 28px;   
    29.     border: 1px solid #eee;   
    30.     border-radius: 14px;   
    31.     left: 1px;   
    32.     background-color:#fff;   
    33.     -webkit-transition: left .2s ease-in;   
    34.     transition: left .2s ease-in;   
    35. }   
    36. .switch-block input[type="checkbox"]:checked + label{   
    37.     background-color:#3c6;   
    38.     -webkit-transition: background .2s ease-in;   
    39.     transition :background .2s ease-in;   
    40. }   
    41. .switch-block input[type="checkbox"]:checked + label:after{   
    42.     left: 32px;   
    43.     -webkit-transition: left .2s ease-in;   
    44.     transition: left .2s ease-in;   
    45. }   

    • 本文链接：http://www.cnblogs.com/maple0x/p/5624401.html

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

    标签：
    美化 控件 表单 CSS3
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习