关于CSS3美化表单的控件

程序员文章站 2022-04-09 17:42:12

...

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

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

一.下拉控件

效果图：

关于CSS3美化表单的控件

下拉控件的布局结构：

<p class="container">  
        <p 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>  
        </p>  
    </p>

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

核心样式：

.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;   
    border-left: 1px solid #ccc;   
    border-bottom: 1px solid #ccc;   
    -webkit-transform: rotate(-45deg);   
    transform: rotate(-45deg);   
    -webkit-transition: transform .2s ease-in, top .2s ease-in;   
    transition: transform .2s ease-in, top .2s ease-in;   
}   
/* 
    被选中的列表项显示的区域  
*/  
.container .select p{   
    padding: 0 15px;   
    line-height: 40px;   
    cursor: pointer;   
}   
/* 
    下拉列表的样式  
    默认高度为0  
*/  
.container .select ul{   
    list-style: none;   
    background-color: #fff;   
    width: 100%;   
    overflow-y: auto;   
    position: absolute;   
    top: 40px;   
    left: 0;   
    max-height:0;   
    -webkit-transition: max-height .3s ease-in;   
    transition: max-height .3s ease-in;   
}   
.container .select ul li{   
    padding: 0 15px;   
    line-height: 40px;   
    cursor: pointer;   
}   
  
.container .select ul li:hover{   
    background-color: #e0e0e0;   
}   
.container .select ul li.selected{   
    background-color: #39f;   
    color: #fff;   
  
}   
/*下拉控件动画*/  
@-webkit-keyframes slide-down{   
    0%{   
        -webkit-transform: scale(1, 0);   
        transform: scale(1, 0);   
    }   
    25%{   
        -webkit-transform: scale(1, 1.2);   
        transform: scale(1, 1.2);   
    }   
    50%{   
        -webkit-transform: scale(1, .85);   
        transform: scale(1, .85);   
    }   
    75%{   
        -webkit-transform: scale(1, 1.05);   
        transform: scale(1, 1.05);   
    }   
    100%{   
        -webkit-transform: scale(1, 1);   
        transform: scale(1, 1);   
    }   
}   
@keyframes slide-down{   
    0%{   
        -webkit-transform: scale(1, 0);   
        transform: scale(1, 0);   
    }   
    25%{   
        -webkit-transform: scale(1, 1.2);   
        transform: scale(1, 1.2);   
    }   
    50%{   
        -webkit-transform: scale(1, .85);   
        transform: scale(1, .85);   
    }   
    75%{   
        -webkit-transform: scale(1, 1.05);   
        transform: scale(1, 1.05);   
    }   
    100%{   
        -webkit-transform: scale(1, 1);   
        transform: scale(1, 1);   
    }   
}   
.container .select.on ul{   
    /* 
        默认情况下,ul的高度为0,当点击控控件的时候,  
        设置下拉列表的高度。  
    */  
    max-height: 300px;   
    -webkit-transform-origin: 50% 0;   
    transform-origin: 50% 0;   
    -webkit-animation: slide-down .5s ease-in;   
    animation: slide-down .5s ease-in;   
}   
/*下拉选项被选中后控制箭头的方向*/  
.container .select.on:after{   
    -webkit-transform: rotate(-225deg);   
    transform: rotate(-225deg);   
    top: 18px;   
}

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

$(function(){   
    var selected  = $('.select > p');   
    //控制列表显隐   
    selected.on('click', function(event){   
        $(this).parent('.select').toggleClass('on');   
        event.stopPropagation();   
    });   
    //点击列表项,将列表项的值添加到p标签中   
    $('.select li').on('click', function(event){   
        var self = $(this);   
        selected.text(self.data('value'));   
    });   
    //点击文档其他区域隐藏列表   
    $(document).on('click', function(){   
        $('.select').removeClass('on');   
    });   
});

二.美化单选框

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

/*用过label标签来模拟radio 的样式*/  
.radio-block label{   
    display: inline-block;   
    position: relative;   
    width: 28px;   
    height: 28px;   
    border: 1px solid #cccccc;   
    background-color: #fff;   
    border-radius: 28px;   
    cursor: pointer;   
    margin-right:10px;   
}   
  
input[type="radio"]{   
    display: none;   
}   
.radio-block label:after{   
    content: '';   
    display: block;   
    position: absolute;   
    width: 20px;   
    height: 20px;   
    left: 4px;   
    top: 4px;   
    background-color: #28bd12;   
    border-radius: 20px;   
    /*通过scale属性来控制中心点*/  
    -webkit-transform: scale(0);   
    transform: scale(0);   
}   
/*选中样式*/  
input[type="radio"]:checked + label{   
    background-color :#eee;   
    -webkit-transition: background-color .3s ease-in;   
    transition: background-color .3s ease-in;   
}   
/*选中之后的样式*/  
input[type="radio"]:checked + label:after{   
    -webkit-transform: scale(1);   
    transform: scale(1);   
    -webkit-transition: transform .2s ease-in;   
    transition: transform .2s ease-in;   
}

最后效果：

三.美化复选框

关于CSS3美化表单的控件

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

.switch-block{   
    width: 980px;   
    padding: 3% 0;   
    margin: 0 auto;   
    text-align: center;   
    background-color: #fc9;   
}   
.switch-block label{   
    display: inline-block;   
    width: 62px;   
    height: 30px;   
    background-color:#fafafa;   
    border:1px solid #eee;   
    border-radius: 16px;   
    position: relative;   
    margin-right: 10px;   
    cursor: pointer;   
    -webkit-transition: background .2s ease-in;   
    transition :background .2s ease-in;   
}   
input[type="checkbox"]{   
    display: none;   
}   
.switch-block label:after{   
    content: '';   
    position: absolute;   
    width: 28px;   
    height: 28px;   
    border: 1px solid #eee;   
    border-radius: 14px;   
    left: 1px;   
    background-color:#fff;   
    -webkit-transition: left .2s ease-in;   
    transition: left .2s ease-in;   
}   
.switch-block input[type="checkbox"]:checked + label{   
    background-color:#3c6;   
    -webkit-transition: background .2s ease-in;   
    transition :background .2s ease-in;   
}   
.switch-block input[type="checkbox"]:checked + label:after{   
    left: 32px;   
    -webkit-transition: left .2s ease-in;   
    transition: left .2s ease-in;   
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

关于CSS3美化表单的控件

.Net语言Smobiler开发利用Gridview控件设计较复杂的表单

关于老式浏览器兼容HTML5和CSS3的问题

PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法

7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口

HTML的select控件美化

css3实现一款模仿iphone样式的注册表单

整理关于Bootstrap表单的慕课笔记

使用CSS3美化HTML表单的技巧演示

一直复略了的一个问题，关于表单重复提交

关于表单的两点交互体验改进技巧