Use CSS to customize the style of the green checkbox button
Jun 12, 2018 am 09:51 AM
This article mainly introduces the style of CSS custom green check box button, which has certain reference value. Now I share it with you. Friends in need can refer to
HTML’s own complex The select box or radio button button styles are relatively simple. Sometimes these form controls may need to match their own theme styles. They need to beautify them. In the past, you may need to use JS to implement it. Now CSS can also be fully implemented The effect we want.
Rendering:
Let’s go straight to the topic. The first thing that comes to mind is that the check box needs a background color. Then there is a check box selected state. We use "check mark" to represent the selected state here. HTML can simply represent
<p class="i-check">
<input type="checkbox" value="0" />
<label></label>
</p>.i-check as a whole check box. Added CSS The code is also simple
.i-check {
width: 20px;
height: 20px;
position: relative;
margin: 20px auto;
}The size of the check box is determined according to your own needs. The margin is set here to display it in the middle of the browser.
Then the default state of the check box is set, here Use label to set, its height and width are the same as .i-check settings, then give it a background color and set its position.
.i-check label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #1A9909;
border-radius: 4px;We have already fixed the default state. Let's continue the analysis, What is needed at this time is a selected state. As mentioned above, the selected state is represented by a check mark. Here we use the pseudo-class after to set it, set its border, and rotate the after, so that it becomes a check mark. But the default state The check mark is hidden, so we used an opacity of 0.
.i-check label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
transform: rotate(-45deg);
}Okay, the entire state is set. Now we need to make the check mark appear when the check box is clicked. The following code will do it Complete
.i-check input[type=checkbox]:checked + label:after {
opacity: 1;
}After writing this, don’t forget to let the Input check box set its style. In order to allow users to click on it, its height and width must be the same size as the whole box, so that it is at the top of the entire box. The top level. This way the user can click anywhere in this area. OK, the last step is to hide the input checkbox. To hide it, it is not to actually hide it and remove it. In this case, there will be no click effect. Hide here What is needed is to use opacity to set it to 0.
.i-check input[type=checkbox] {
opacity: 0;
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
}Okay, the entire effect is completed. In the same way, you can also set the effect of the radio button.
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:
How to set CSS
Text font color
#How to solve the problem of gaps under CSS images
The above is the detailed content of Use CSS to customize the style of the green checkbox button. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
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
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
How can CSS be used to implement dark mode theming on a website?
Jun 19, 2025 am 12:51 AM
ToimplementdarkmodeinCSSeffectively,useCSSvariablesforthemecolors,detectsystempreferenceswithprefers-color-scheme,addamanualtogglebutton,andhandleimagesandbackgroundsthoughtfully.1.DefineCSSvariablesforlightanddarkthemestomanagecolorsefficiently.2.Us
Can you explain the difference between em, rem, px, and viewport units (vh, vw)?
Jun 19, 2025 am 12:51 AM
The topic differencebetweenem, Rem, PX, andViewportunits (VH, VW) LiesintheirreFerencepoint: PXISFixedandbasedonpixelvalues, emissrelative EtothefontsizeFheelementoritsparent, Remisrelelatotherootfontsize, AndVH/VwarebaseDontheviewporttimensions.1.PXoffersprecis
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
External vs. Internal CSS: What's the Best Approach?
Jun 20, 2025 am 12:45 AM
ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed
What are the key differences between inline, block, inline-block, and flex display values?
Jun 20, 2025 am 01:01 AM
Choosing the correct display value in CSS is crucial because it controls the behavior of elements in the layout. 1.inline: Make elements flow like text, without occupying a single line, and cannot directly set width and height, suitable for elements in text, such as; 2.block: Make elements exclusively occupy one line and occupy all width, can set width and height and inner and outer margins, suitable for structured elements, such as; 3.inline-block: has both block characteristics and inline layout, can set size but still display in the same line, suitable for horizontal layouts that require consistent spacing; 4.flex: Modern layout mode, suitable for containers, easy to achieve alignment and distribution through justify-content, align-items and other attributes, yes
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
How can you animate an SVG with CSS?
Jun 30, 2025 am 02:06 AM
AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b
