CODEWITHSUNDEEP
cssresizelabelcheckbox
codeChris
codeChris

Reputation: 885

Create CSS to enlarge checkboxes

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.

Ideas?

Upvotes: 31

Views: 92622

Answers (9)

Chloe
Chloe

Reputation: 26264

This works. It uses relative sizes so it scales with your current font size.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

You may need to adjust your margins though.

Upvotes: 13

DropHit
DropHit

Reputation: 1724

I have used this library with sucess

http://plugins.krajee.com/checkbox-x

It requires jQuery and bootstrap 3.x

Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Put the contents of the zip in a folder within your project

Pop the needed libs in your header

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

There are numerous other features as well if you browse the plugin site.

Upvotes: 1

aldrien.h
aldrien.h

Reputation: 3635

Simply add background image to checkbox. And adjust the sizes as you prefer.

The code below automatically adds background when it's checked, and the size remains the same with unchecked status.

No need to specify like:

input[type=checkbox]:checked

or

input[type=checkbox]:checked ~ div label

For ex, all checkboxes:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

See fiddle here.

Upvotes: 0

Asle G
Asle G

Reputation: 588

Or simply style it with height and width like this:

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS. I have used this with bootstrap and the "checkbox-inline" class

Upvotes: -1

Andy
Andy

Reputation: 14575

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}


input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}
<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

Upvotes: 10

stwp
stwp

Reputation: 517

To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large. 

input[type="checkbox"] {
  transform:scale(2, 2);
}

You can also use decimal values, for just slightly bigger checkboxes.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }

Upvotes: 50

Kurt Emch
Kurt Emch

Reputation: 529

I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.

input[type="checkbox"] {
  font-size: 50px;
}

Upvotes: 3

Dominic Green
Dominic Green

Reputation: 10258

Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here http://www.456bereastreet.com/lab/form_controls/checkboxes/ You can also create your own with javascript but this is not great for user accessibility.

So I would tray an avoid changing if possible.

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172458

Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.

or you can try with 

 style="zoom:1.2"

jQuery offers a plugin to do a replacement on checkboxes

Upvotes: 11

Related Questions