CSS: Input checkbox and radio button appearance - html

Question

I am trying to fix checkbox with tickmarks and radio with periods.
toggling content:"" on unchecked state and content:"\2714" checked state I am getting a flicker. So I made color transparent. Is that correct?
The tick mark doesn't fit exactly to the box. How can alter only that tickmark?
If the sentence is split into lines, the square and text fall on the same margin. What should I do if both should be in seperate blocks?
The period (.) on the radio button, is tiny enough to be visible. If I increase the font-size it misaligns with the text.
I have copied bootstrap CSS and HTML format too.
Here is my jsfiddle link.
https://jsfiddle.net/488s5e70/2/
input[type="radio"],
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
input[type="checkbox"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: "\2714";
color: transparent;
display: inline-block;
font-size: 13px;
margin-right: 5px;
text-align: center;
}
input[type="checkbox"]:disabled+span {
color: #ddd;
}
input[type="checkbox"]:checked+span:before {
content: "\2714";
color: #000;
}
input[type="checkbox"]:disabled:checked+span:before {
content: "\2714";
color: #ddd;
}
input[type="checkbox"]:disabled+span:before {
border: 1px solid #ddd;
}
input[type="radio"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: ".";
color: transparent;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin-right: 5px;
border-radius: 8px;
text-align: center;
}
input[type="radio"]:disabled+span {
color: #ddd;
}
input[type="radio"]:checked+span:before {
content: "\00b7";
color: #000;
}
input[type="radio"]:disabled:checked+span:before {
content: "\00b7";
color: #ddd;
}
input[type="radio"]:disabled+span:before {
border: 1px solid #ddd;
}
<div class="container">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span>Option one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" checked disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
</div>

Answer 1

Transparency instead content ""
its right way! its even better. every thing is OK
fitting the tick mark
when its about a font, there is no warranty about a same and true display in all browsers, i just prefer a background image for check box, a png image
if you have mobile side users, note that all contents inside your elements (tick and ball) probably got change
plain text replaced with android emoticons
seperate blocks
A table with only 2 column could be fastest solution.
Radio
use another character, my offering is "●" or "•"
however the best way is background-image
input[type="radio"]:checked+span:before{
content:"\25CF"; /* or any better character */
color:#000;
}

Answer 2

Right, some things I would change to fix this.
Flexbox, Flexbox everywhere.
Why use a period, when we can use a BLACK CIRCLE
You can find different shapes here if you type "(Hex value)" as the content in you before it will appear.
Here's what I've done.
input[type="radio"],
input[type="checkbox"] {
position: relative;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
input[type="checkbox"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: "\2714";
color: transparent;
display: inline-block;
font-size: 13px;
margin-right: 5px;
text-align: center;
/* new code notice me! */
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]:disabled+span {
color: #ddd;
}
input[type="checkbox"]:checked+span:before {
content: "\2714";
color: #000;
}
input[type="checkbox"]:disabled:checked+span:before {
content: "\2714";
color: #ddd;
}
input[type="checkbox"]:disabled+span:before {
border: 1px solid #ddd;
}
input[type="radio"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: ".";
color: transparent;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin-right: 5px;
border-radius: 8px;
text-align: center;
/* new code notice me! */
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:disabled+span {
color: #ddd;
}
/* \25cf is the code for BLACK CIRCLE */
input[type="radio"]:checked+span:before {
content: "\25cf";
color: #000;
}
input[type="radio"]:disabled:checked+span:before {
content: "\25cf";
color: #ddd;
}
input[type="radio"]:disabled+span:before {
border: 1px solid #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span>Option one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" checked disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
</div>
The flexbox lines are;
display: inline-flex;
align-items: center;
justify-content: center;
They mean;
- things inside me should use flexbox,
- they should be centered vertically,
- they should be centered horizontally.
I hope you find this helpful :-)