About CSS3 controls for beautifying forms-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

About CSS3 controls for beautifying forms

不言

Jun 28, 2018 am 09:41 AM

This article mainly introduces in detail the techniques of beautifying form controls with CSS3, beautifying drop-down controls, radio buttons, and check boxes. Interested friends can refer to the default controls of

The styles are different in different browsers and the user experience is poor. CSS3 can be used to beautify form controls and provide a better user experience. The downside is browser compatibility issues.

1. Drop-down control

Rendering:

The layout structure of the drop-down control:

<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>

Copy after login

ul is used to simulate a drop-down list. During actual use, it can be dynamically generated based on the data returned from the background. The p element is used to render the selected option.

Core style:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

.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;   
}

Copy after login

This is just a static style. If you want to implement the "selection" process, you need to use JavaScript to achieve it.

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

Copy after login

2. Beautify the radio button box

lable tag can be linked with the radio button box through the for attribute. We use this feature to beautify the radio button, which is also the principle. Also, don’t forget to hide the real radio button (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: &#39;&#39;;   
    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;   
}

Copy after login

Final effect:

##3. Beautify the check box

The principle is similar to the way of making radio button. When checked, the left value of the circle and the background of the label are displayed.

.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: &#39;&#39;;   
    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;   
}

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Three ways to verify CSS control styles through priority comparison

About CSS banner image response Method for centered display

How to use negative margin values in CSS to adjust the center position

The above is the detailed content of About CSS3 controls for beautifying forms. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

1 months ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1662

CakePHP Tutorial

1418

Laravel Tutorial

1311

PHP Tutorial

1261

C# Tutorial

1234

Related knowledge

Google Fonts Variable Fonts Apr 09, 2025 am 10:42 AM

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript Apr 11, 2025 am 11:29 AM

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more

HTML Data Attributes Guide Apr 11, 2025 am 11:50 AM

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

How We Created a Static Site That Generates Tartan Patterns in SVG Apr 09, 2025 am 11:29 AM

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan

How to Build Vue Components in a WordPress Theme Apr 11, 2025 am 11:03 AM

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.

PHP is A-OK for Templating Apr 11, 2025 am 11:04 AM

PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic

Programming Sass to Create Accessible Color Combinations Apr 09, 2025 am 11:30 AM

We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.

See all articles