How to style a checkbox using CSS

0 votes

I am trying to style a checkbox using the following lines of code:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

 

But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Feb 17 in Others by Soham
• 8,730 points
41 views

1 answer to this question.

0 votes

In modern browsers which include Internet Explorer 9 and later, it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.

Here are some useful links:

It is worth noting that the fundamental issue has not changed. You still can't apply styles such as borders directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

answered Feb 17 by Aditya
• 7,280 points

Related Questions In Others

0 votes
1 answer

How to disable a link using only CSS

[aria-current="page"] {   pointer-events: none;   cursor: default;   text-decoration: none;   color: black; } <a href="link.html" ...READ MORE

answered Feb 14 in Others by narikkadan
• 10,840 points
28 views
0 votes
1 answer

How to create subnet inside a VPC in AWS using Terraform?

Hi@akhtar, You need to use aws_subnet resource inside your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,360 points
163 views
0 votes
1 answer

How to create a App using Material Design?

Hi@akhtar, You need to use the MaterialApp method ...READ MORE

answered Jul 23, 2020 in Others by MD
• 95,360 points
155 views
0 votes
0 answers

how can I deploy a test in pytest framework to airflow using DAG?

I have established an automative testing framework ...READ MORE

Oct 4, 2021 in Others by Yuan
• 120 points
38 views
0 votes
1 answer

How to style a checkbox using CSS?

Add focus outline input[type="checkbox"]:focus + span:before { ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
4 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,513 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
1,659 views
0 votes
1 answer

What is a css selector and where is it used?

CSS Selector is a combination of element ...READ MORE

answered Nov 21, 2018 in Data Analytics by Kalgi
• 52,350 points
267 views
0 votes
1 answer

How to create an HTML button that acts like a link

To answer your doubt, the plain HTML ...READ MORE

answered Feb 17 in Others by Aditya
• 7,280 points
98 views
0 votes
1 answer

How to redirect to another page using PHP

You could use a function which is ...READ MORE

answered Feb 18 in Others by Aditya
• 7,280 points
129 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP