473,324 Members | 2,193 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

How to Customize Checkbox Using CSS?

Hi friends ,
I want to customize checkbox with the help of CSS. Mostly developers use javascript for customizing the look of the checkboxes but I want to use CSS. I hope any tech developer can help me over here in resolving the issue.
Oct 21 '16 #1
2 12197
Hello,
You can hide the input using display: none; and add extra element which will take over the function of your checkbox. Than you can style that element to look like checkbox button you need.

Example:

HTML:
Expand|Select|Wrap|Line Numbers
  1. <span class="list-item">
  2.   <label>
  3.     <input type="checkbox" name="name" value="YourValueName">
  4.     <span class="list-item-label">YourValueName</span>
  5.   </label>
  6. </span>
  7.  
CSS:
Expand|Select|Wrap|Line Numbers
  1. .list-item input[type='checkbox'] {
  2.     display: none;
  3. }
  4.  
  5. .list-item input[type='checkbox'] + span {
  6.     position: relative;
  7.     padding-left: 12px;
  8.     padding-right: 13px;
  9. }
  10.  
  11. .list-item input[type='checkbox'] + span:before {
  12.     position: absolute;
  13.     left: -8px;
  14.     top: 50%;
  15.     width: 13px;
  16.     height: 13px;
  17.     display: inline-block;
  18.     content: '';
  19.     margin: 0;
  20.     clear: none;
  21.     cursor: pointer;
  22.     background: #e1e1e1;
  23.     margin-top: -7.5px;
  24. }
  25.  
  26. .list-item input[type='checkbox']:checked + span:before  {
  27.     background: #2f355b;
  28. }
  29.  
Oct 26 '16 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: sachin | last post by:
How to customize PrintPreviewDialog, such that, addition of a new button, change the functionality of existing button should be possible programatically. Sample code will help a lot. Moreover, what...
7
by: Ryan Ternier | last post by:
I have a check box on my page. When a user clicks this box I have a confirmation box come up. When the user clicks OK, true is returned, otherwise false. Now, when true is Returened, I want...
1
by: Ramakrishnan Nagarajan | last post by:
Hi, I have two checkboxes in each row of a grid. One for Modify and another one for View. If I click Modify the View should get automatically checked and should be disabled. Earlier I did this in...
1
by: aspnoob | last post by:
hello i just started off with asp.net , needed some help on how to display the state of checkboxes from a SQL database. my database table has the following format seat.dbo ( db design) (...
2
by: AmitKu | last post by:
<script> function CheckChange() { var mycheck = document.getElementById('test'); mycheck.check = true; } </script> <body> <form id="form1" runat="server">
1
by: spiderman2 | last post by:
When the page is first accessed, certain HTML elements are dynamically created. The checkboxes all have the name "chkBox". There is a special "checkAll" checkbox which when checked or unchecked, does...
6
by: rrlveloso09 | last post by:
---code--- if (readOnly) { //cb.disable(); cb.setEnabled(false); } when lower versions of jdk is used (lower than 1.4), the disable() method is working properly (meaning the checkbox...
7
by: kikz4life | last post by:
Hi everyone. Im trying to optimize a website. But im stuck with this code here. My problem is when i check/uncheck the checkbox it took 5-6 sec just by clicking it. Could anyone help me rewrite this...
1
by: vivek kapile | last post by:
Title:Dynamically adding table row with a checkbox using JavaScript Author:Vivek Kapile Email:snipped Language:JavaScript Platform:JavaScript in ASP.net Technology:Used in ASP.net...
1
by: ssonuswarna | last post by:
I am trying to disable and enable a checkbox from javascript. > The problem is that if the checkbox starts out as: > <input id="Override" type="checkbox" name="Override"/> > I can change it...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.