Use JavaScript to change the radio and checkbox styles in the input

Home

Web Front-end

JS Tutorial

Use JavaScript to change the radio and checkbox styles in the input_form special effects

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:41 PM

input Radio style

Pictures involved in this article

<title>

</title>Use javascript to customize radio and checkbox styles

<h4>
</h4>
Radio button style: <div class="input_style">
<span>
<input type="radio" name="sex" value="boy" checked id="sex_boy">
</span><label for="sex_boy"></label>Male<span>
<input type="radio" name="sex" value="girl" id="sex_girl">
</span><label for="sex_girl"></label>Female</div>
<div class="input_style">
<span>
<input type="radio" name="marry" value="yes" id="marry_yes">
</span><label for="marry_yes"></label>boy<span>
<input type="radio" name="marry" value="not" checked id="marry_not">
</span><label for="marry_not"></label>girl</div>
<h4>
</h4>
Checkbox style: <ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby1">
</span><label for="hobby1"></label>xhtml</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby2">
</span><label for="hobby2"></label>CSS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby3">
</span><label for="hobby3"></label>Javascript</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby4">
</span><label for="hobby4"></label>Flash</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby5">
</span><label for="hobby5"></label>Ajax</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby6">
</span><label for="hobby6"></label>AS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby7">
</span><label for="hobby7"></label>Flex</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby8">
</span><label for="hobby8"></label>PHP/.NET/JSP</li>
</ul>
<ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby9">
</span><label for="hobby9"></label>Understand</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby10">
</span><label for="hobby10"></label>General</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby11">
</span><label for="hobby11"></label>Skilled</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby12">
</span><label for="hobby12"></label>Mastery</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby13">
</span><label for="hobby13"></label>Senior Expert</li>
</ul>
<div class="button" id="button">
<input type="button" value="加载样式">
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

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

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

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

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 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

Where is the login entrance for gmail email?

7338

Java Tutorial

1627

CakePHP Tutorial

1352

Laravel Tutorial

1265

PHP Tutorial

1210

Related knowledge

macOS: How to change the color of desktop widgets Oct 07, 2023 am 08:17 AM

In macOS Sonoma, widgets don't have to be hidden off-screen or forgotten in the Notification Center panel like they did in previous versions of Apple's macOS. Instead, they can be placed directly on your Mac’s desktop – they’re also interactive. When not in use, macOS desktop widgets fade into the background in a monochrome style, reducing distractions and allowing you to focus on the task at hand in the active application or window. However, when you click on the desktop, they return to full color. If you prefer a drab look and want to retain that aspect of uniformity on your desktop, there's a way to make it permanent. The following steps demonstrate how it is done. Open the System Settings app

Guide to solving misalignment of WordPress web pages Mar 05, 2024 pm 01:12 PM

Guide to solving misaligned WordPress web pages In WordPress website development, sometimes we encounter web page elements that are misaligned. This may be due to screen sizes on different devices, browser compatibility, or improper CSS style settings. To solve this misalignment, we need to carefully analyze the problem, find possible causes, and debug and repair it step by step. This article will share some common WordPress web page misalignment problems and corresponding solutions, and provide specific code examples to help develop

How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

CSS web background image design: create various background image styles and effects Nov 18, 2023 am 08:38 AM

CSS web page background image design: Create various background image styles and effects, specific code examples are required Summary: In web design, background images are an important visual element, which can effectively enhance the attractiveness and readability of the page. This article will introduce some common CSS background image design styles and effects, and provide corresponding code examples. Readers can select and apply these background image styles and effects according to their own needs and preferences to achieve better visual effects and user experience. Keywords: CSS, background image, design style, effect, code representation

$60 years in the making: NASA confirms hypothesis on Earth\'s global electric field$ 60 years in the making: NASA confirms hypothesis on Earth\'s global electric field Aug 31, 2024 pm 09:35 PM

NASA has confirmed the existence of a global electric field around Earth, achieved through a recent rocket launch. This is a big deal, since this is the first direct measurement of a phenomenon which has been long theorized but has never been observe

Detailed explanation of input box binding events in Vue documents Jun 21, 2023 am 08:12 AM

Vue.js is a lightweight JavaScript framework that is easy to use, efficient and flexible. It is one of the most popular front-end frameworks currently. In Vue.js, input box binding events are a very common requirement. This article will introduce the input box binding events in the Vue document in detail. 1. Basic concepts In Vue.js, the input box binding event refers to binding the value of the input box to the data object of the Vue instance, thereby achieving two-way binding of input and response. In Vue.j

What to do if there is no cursor when clicking on the input box Nov 24, 2023 am 09:44 AM

Solutions for clicking the input box without a cursor: 1. Confirm the focus of the input box; 2. Clear the browser cache; 3. Update the browser; 4. Use JavaScript; 5. Check the hardware device; 6. Check the input box properties; 7. Debug JavaScript code; 8. Check other elements of the page; 9. Consider browser compatibility.

See all articles