Home Web Front-end JS Tutorial Modify the style of input checkbox checkbox

Modify the style of input checkbox checkbox

Mar 19, 2018 am 10:47 AM
input checkbox

这次给大家带来input复选框checkbox的样式修改,input复选框checkbox样式修改的注意事项有哪些,下面就是实战案例,一起来看一下。

修改之前的样式 

修改之后的样式

html

<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
Copy after login

css

input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
Copy after login

“\2713”实体符号√ ;

选中的颜色可以在input[type="checkbox"]:checked::before里修改border-color及color就可以了

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

HTML与CCS结合

Gulp命令生成精灵图
Safari浏览器select下拉列表文字太长不换行的解决方法

The above is the detailed content of Modify the style of input checkbox checkbox. 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

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Use jQuery to implement real-time updates of checkbox selected status Use jQuery to implement real-time updates of checkbox selected status Feb 23, 2024 pm 03:45 PM

Using jQuery to Real-time Update the Selected Status of Check Boxes In web development, we often encounter situations where we need to update the selected status of check boxes in real time. By using jQuery, we can easily implement the function of updating the selected status of the check box in real time. Here's how to use jQuery to accomplish this task. First, we need to prepare a simple HTML structure containing multiple checkboxes:

How to encapsulate input components and unified form data in vue3 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( )=>({

How to implement laravel input hidden field 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') }}".

What to do if there is no cursor when clicking on the input box 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.

How to use checkbox component in uniapp How to use checkbox component in uniapp Jul 04, 2023 pm 12:05 PM

How to use the checkbox component in uniapp In uniapp, the checkbox component is a common user interaction component and is often used for multi-option selection. This article will introduce how to use the checkbox component in uniapp and provide code examples. Introducing the checkbox component In the page that needs to use the checkbox component, you first need to introduce the uniapp checkbox component. You can add the following code to the .vue file of the page: &lt;template&gt;&lt;view&gt;

Detailed explanation of input box binding events in Vue documents 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

How to use the input box carriage return event and verification function in the Vue document How to use the input box carriage return event and verification function in the Vue document Jun 20, 2023 am 09:13 AM

Vue is a popular JavaScript front-end framework with a responsive data binding and component system at its core. In Vue applications, the input box is one of the most commonly used UI elements. When the user enters text, we hope to listen for the carriage return event and validate the input before submitting. This article will introduce the input box enter event and verification function usage in the Vue document. 1. The carriage return event of the input box in Vue. Monitoring the carriage return event of the input box in Vue is very simple.

Use jQuery to determine the checked state of a checkbox Use jQuery to determine the checked state of a checkbox Feb 25, 2024 pm 12:18 PM

How to tell if a checkbox is selected using jQuery? In web development, we often encounter situations where we need to determine whether a check box is selected. This functionality can be easily achieved using jQuery. The following will introduce how to use jQuery to determine whether a check box is selected, and attach specific code examples. First, make sure to include the jQuery library in your HTML page:

See all articles