Home

JS special effects

CSS3 special effects

Beautiful CSS3 radio check button beautification style

Several beautiful CSS3 radio select check button beautification styles, and simple form radio button and check box beautification codes.

Download Now Preview

Several beautiful CSS3 radio select check button beautification styles, and simple form radio button and check box beautification codes.
<!DOCTYPE HTML>
<html>
<head>
<title>Good-looking CSS3 radio check button beautification style</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body><script src="/demos/googlegg.js"></script>

<div id="holder">
<div>
<div class="tag">Checkbox Small</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
</div>
<div>
<div class="tag">Checkbox Big</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label>
<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label>
<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label>
</div>

<div>
<div class="tag">Radio Small</div>
<div class="button-holder">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"> ;</label><br />
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"> </label><br />
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"> </label><br />
<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"> </label><br />
</div>
</div>
<div>
<div class="tag">Radio Big</div>
<div class="button-holder">
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br />
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br />
<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br />
</div>
</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Detailed explanation of css3 beautification radio button radio example

30 Jun 2017

This pure CSS3 method of beautifying radio button radio is suitable for the following situations: 1. It is compatible with IE9 and above. If it needs to be compatible with IE8, you need to write an IE hack to remove the style. 2. It only supports radio button radio because the radio button selects the style. The circle can be made with CSS, but the checkbox checkbox selection effect requires an image or icon font library 3. No JS is required to support the switching effect. The following picture is the final rendering: HTML code: <label for="man" class="rad

HTML+CSS to realize beautiful style radio buttons and check boxes

19 Dec 2017

Radio buttons and check boxes are functions required by the front end. This article mainly introduces HTML+CSS to achieve beautiful styles of radio buttons and check boxes. Friends in need can refer to it. I hope it can help everyone complete more beautiful styles of single buttons. Marquee, checkbox.

How to skillfully use CSS3 special effects to improve the user experience of web pages

09 Sep 2023

How to skillfully use CSS3 special effects to improve the user experience of web pages. With the development of the Internet, web design and user experience have become important links in website development. The application of CSS3 special effects can add dynamics and visual effects to web pages and improve user experience. This article will introduce several common CSS3 special effects and their code examples to help developers become more proficient in using CSS3 special effects and improve the user experience of web pages. Transition effect (Transition) Transition effect is one of the most basic special effects in CSS3. By changing a certain attribute

js implementation of iPhone interface style radio button and check box button examples_javascript skills

16 May 2016

This article mainly introduces the implementation of radio button and check box buttons in the iPhone interface style using js, and involves techniques related to dynamically operating page element styles with javascript. It is very beautiful and generous. Friends who need it can refer to it.

Self-study chapter - Beautiful radio button checkbox style made with pure CSS_html/css_WEB-ITnose

24 Jun 2016

Self-study chapter - beautiful radio button checkbox style made with pure CSS

Implementation of css3 visual effects

22 Mar 2018

This time I will bring you the implementation of CSS3 visual special effects. What are the precautions for realizing CSS3 visual special effects? The following is a practical case, let’s take a look.

Sharing of 7 eye-catching jQuery/CSS3 special effects examples_jquery

16 May 2016

jQuery and CSS3 are definitely used a lot for web front-end development. Next, I will share some special effects made by jQuery and CSS3. I hope it will be helpful to friends who like to learn special effects.

How to use css3 to achieve 3D stereoscopic effects

14 Mar 2018

This time I will show you how to use css3 to achieve 3D stereoscopic special effects. What are the precautions for using css3 to achieve 3D stereoscopic special effects? The following is a practical case, let’s take a look.

CSS3 3D special effects video data sharing

31 Aug 2017

"CSS3 3D Special Effects Video Tutorial" uses the transition attribute, perspective attribute, and transform attribute in CSS3 to create real and usable three-dimensional effects.

See all articles