CODEWITHSUNDEEP
csscheckbox
Sergey Scopin
Sergey Scopin

Reputation: 2245

make Custom checkbox not to change it's size.

I'm trying to make custom checkbox, like it said here This is what I've done: http://jsfiddle.net/216nt56y/ My css:

input[type=checkbox].css-checkbox {
    visibility: hidden;
}
label.css-label
{
    border-color: white;
    border: white 1px solid;
    border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {  
    content: "\2714";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;  
}

It is not really what I want, because I want a check square to have the same size when it is unchecked. How can I get it?

Upvotes: 0

Views: 79

Answers (2)

akaBase
akaBase

Reputation: 2250

Like konrad said by giving it a width and height it will always have its shape but rather than using min-height and min-width just have height and width and then you can also move the check tick into the center of the checkbox using margin

label.css-label
{
    border-color: white;
    border: white 1px solid;
    border-radius: 3px;
    display: inline-block;
    height: 18px;
    width: 18px; 
}
input[type=checkbox].css-checkbox:checked + label:before {  
    content: "\2714";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;
    margin-left:2px;
}

here is a JSFIDDLE showing it in action

Upvotes: 1

Konrad
Konrad

Reputation: 81

try something like this

label.css-label {
  display: inline-block;
  min-height: 20px;
  min-width: 20px; 
}

Upvotes: 1

Related Questions