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

inputRadiostyle

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

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

macOS：如何更改桌面小部件的颜色Oct 07, 2023 am 08:17 AM

在macOSSonoma中，小部件不必隐藏在屏幕外，也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反，它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时，macOS桌面小部件会采用单色样式淡入背景，从而减少干扰，并允许您专注于活动应用程序或窗口中手头的任务。但是，当您单击桌面时，它们将恢复为全彩色。如果您更喜欢单调的外观，并且希望在桌面上保留这一方面的统一性，那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

WordPress网页错位现象解决攻略Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开

laravel input隐藏域怎么实现Dec 12, 2022 am 10:07 AM

laravel input隐藏域的实现方法：1、找到并打开Blade模板文件；2、在Blade模板中使用method_field方法来创建隐藏域，其创建语法是“{{ method_field('DELETE') }}”。

vue3怎么封装input组件和统一表单数据May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目，参数大概如下：用原生input原生的input，主要是value和change，数据在change的时候需要同步。App.tsx如下：import{ref}from'vue';exportdefault{setup(){//username就是数据constusername=ref('张三');//输入框变化的时候，同步数据constonInput=;return()=>({

CSS网页背景图设计：创建各种背景图样式和效果Nov 18, 2023 am 08:38 AM

CSS网页背景图设计：创建各种背景图样式和效果，需要具体代码示例摘要：在网页设计中，背景图是一种重要的视觉元素，它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果，并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果，以达到更好的视觉效果和用户体验。关键词：CSS，背景图，设计样式，效果，代码示

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

Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架，具有易用、高效和灵活的特点，是目前广受欢迎的前端框架之一。在Vue.js中，input框绑定事件是一个十分常见的需求，本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中，input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中，从而实现输入和响应的双向绑定。在Vue.j