I'm trying to style a radio button using css3 pseudo elements. In works great in chrome but it jumps back to the default styling in firefox. Any idea?
Here's a fiddle: JSFIDDLE
The HTML:
<input class="fancy" name="cc1" type="radio" checked/>
<input class="fancy" name="cc1" type="radio"/>
The CSS:
input[type="radio"].fancy:before {
content:"";
width: 24px;
height: 24px;
background-color: #1f1f1f;
display: block;
border-radius: 50%;
position: relative;
top: -6px;
left: -6px;
box-shadow: 0 1px 2px rgba(255,255,255,.1),
inset 0 2px 2px rgba(0,0,0,.8);
}
input[type="radio"].fancy:checked:before {
visibility: visible;
content:"";
width: 24px;
height: 24px;
background-color: #1f1f1f;
display: block;
border-radius: 50%;
position: relative;
top: -6px;
left: -6px;
box-shadow: 0 1px 2px rgba(255,255,255,.2),
inset 0 2px 2px rgba(0,0,0,.8);
}
input[type="radio"].fancy:checked:after {
visibility: visible;
content:"";
width: 14px;
height: 14px;
display: block;
border-radius: 50%;
position: relative;
top: -25px;
left: -1px;
background: yellowgreen;
}
I'm trying to avoid background-images
Unfortunately, what you're trying to do is not valid -- ::before and ::after do not work on input elements (any input; it's not just restricted to radio buttons).
Proof available here: http://jsfiddle.net/LvaE2/1/ -- even in the most simple case, it doesn't work.
It also doesn't work in IE or Opera. The fact that it does work in Chrome is because Chrome is going beyond the spec in allowing it.
Your best bet is to do your styling on a label element that is linked to the actual radio button using the for attribute, and then set the radio button itself to display:none;. This is how everyone else does it.
Related question here: Which elements support the ::before and ::after pseudo-elements?
Hope that helps.
CSS3 Input radio will working in Firefox: version > 80 if added style appearance
input[type=checkbox] { appearance:initial; }
Please see the Snippet:
input[type=radio] { appearance:initial; }
input[type=radio]:after{
content: "after content";
width: 100px; height: 100px; display:block;
background: red;
}
input[type=radio]:checked:after{
content: "after content";
width: 100px; height: 100px; display:block;
background: blue;
}
<input type="radio">
<input type="radio">
<input type="radio">
Related
I used a radio button in my simple project. The radio button looks good with a blue color background when selected. But while running the same code using Edge and Firefox, the background color is black.
I heard that the radio button style is Browser specific. Is this true?
And is there any possibility to change the style without custom radio buttons?
If a custom radio button is the only option, then how do you render it the same as in Google Chrome?
Radio Button visible in Chrome
Radio Button visible in Firefox and Edge
I recreated the chrome radio button with custom css and added a blue background instead of gray. It shows up the same on chrome, firefox, and edge. You might want to do some tweaking of the css to fit your size needs though.
Here is the code
HTML
div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: black;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid gray;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 11px;
left: 12px;
content: " ";
display: block;
background: blue;
background-color: blue;
}
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Internet Explorer 'input:checked:before styling is not rendering [duplicate]
Closed 5 years ago.
I'm having issue with :checked styling for my custom checkbox in Internet explorer. It works fine in chrome ,friefox and safari.
How look in IE..
<div class="field">
<input autocomplete="off" id="check" type="checkbox" name="checkbox"/>
<label class="title-checkbox">Accept terms & conditions.</label>
</div>
.field input[type="checkbox"] {
width: 20px;
height: 20px;
border: solid 1px rgba(97, 80, 77, 0.5);
float: left;
outline: 0;
padding-left: 0px !important;
position: relative;
padding: 4px;
cursor: pointer;
}
.field input[type="checkbox"]:checked:before {
content: '';
position: absolute;
top: 3px;
height: 12px;
width: 12px;
background: #ed8b00;
left: 3px;
}
Can anyone help with this.
Thanks in advance.
:after and :before not meant to be used on replaced elements such as form elements (inputs). that's why it doesn't work on IE
Generally you use the label element to make before element on input checkbox like this :
.field input[type="checkbox"] {
width: 20px;
height: 20px;
border: solid 1px rgba(97, 80, 77, 0.5);
float: left;
outline: 0;
padding-left: 0px !important;
position: relative;
padding: 4px;
cursor: pointer;
}
.field input[type="checkbox"] +label{
position: relative;
}
.field input[type="checkbox"]:checked +label:before {
content: '';
position: absolute;
top: 5px;
height: 14px;
width: 14px;
background: #ed8b00;
left: -20px;
}
<div class="field">
<input type="checkbox" name="test" id="test" value="ok">
<label for="test">I'a a label</label>
</div>
you can also use image of your checkbox in label before and completely hide input if you want your own style.
Use This code it will work fine on all browser (IE 10+, Chrome, Mozilla and Safari)
<div class="checkbox">
<input type="checkbox" />
<label></label>
</div>
.checkbox{
position:relative;
}
input[type="checkbox"]{
opacity:0;
position:absolute;
z-index:1;
width:20px;
height:20px;
left:0;
top:0;
margin:0;
}
.checkbox label:before{
content:"";
width:20px;
height:20px;
border:1px solid #000;
display:block;
position:absolute;
left:0;
top:0;
}
.checkbox input[type="checkbox"]:checked + label:before{
background:#000000;
}
Demo
I want to check a checkbox and apply a 1px border around it via an enclosing span tag.
I am a bit stuck on how to detect the checked css property and select the parent span to apply a property to the span? Can I achieve this with only CSS? Below is what I have so far.
CSS(Sass)
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked <--once i detect checked I am unsure how to apply the border to the parent span tag
background: black
position: absolute
top: -8px
left: 0px
HTML
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>
Simply NO,
Cascading does not works like that way. You can't select parent in CSS. But yes you can do this by using sass/scss. But it will not work as you expected.
It will just create a parent wrapper class. But it will not behave using the state of the child element. Because after compiling it's just CSS
We might get a parent selector in the future, may be in CSS4. So we are keeping our fingers crossed. :)
e.g.
SASS
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked
background: black
position: absolute
top: -8px
left: 0px
span.check &
border: 2px solid black
Output CSS,
input.checkbox {
opacity: 0;
}
span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: relative;
}
input.checkbox:checked {
background: black;
position: absolute;
top: -8px;
left: 0px;
}
span.check input.checkbox:checked {
border: 2px solid black;
}
But You can achieve this by using CSS siblings selector,
HTML,
<label>
<input class="checkbox" type="checkbox">
<span class="check"></span>
</label>
CSS,
label {
position: relative;
}
input.checkbox {
opacity: 1;
position: absolute;
}
input.checkbox:checked + span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: absolute;
}
Working example: https://jsfiddle.net/HA3bQ/167/
No way to select a parent with CSS only (until CSS4), so you must use JS..
See this post that talking about it here.
I have not seen that done using CSS, only within the javascript wherever the checkbox resides.
You can put some element after input
<label>
<input class="checkbox" type="checkbox">
<span class="checkmark></span>
</label>
And style with pseudo class :checked
.checkbox:checked ~ .checkmark {
// There goes styles for custom checkmark
}
Recommend look at this site for full examples
the simple answer is just use outline in css style
input.checkbox:checked {
outline: 2px solid black;
}
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>
I am styling a checkbox using CSS3. Everything works fine except that the label jumps whenever I check and uncheck the checkbox. Could you please tell me why?
input[type="checkbox"]{
display:none;
}
input[type="checkbox"] + label::before{
background-color: white;
border: 1px solid #ccc;
content: '';
display: inline-block;
height: 15px;
width: 15px;
text-align: center;
margin: 0 5px -2px 0;
}
input[type="checkbox"]:checked + label::before{
content: '\2713';
}
<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Check 1</label>
</div>
You could add an overflow hidden to your pseudo element to prevent the jumping effect. I also updated the css a little bit to compensate for the overflow and the fact that the arrow wasn't really centered properly in the box.
JSFIDDLE Example
Here is my take on it:
input[type="checkbox"]{
display:none;
}
input[type="checkbox"] + label::before{
background-color: white;
border: 1px solid #ccc;
content: '';
display: inline-block;
height: 22px; /*Change width and height to compensate*/
width: 22px;
text-align: center;
margin: 0 5px -2px 0;
/*Added styles*/
overflow: hidden;
top: 3px;
position: relative;
}
input[type="checkbox"]:checked + label::before{
content: '\2713';
}
You can make the position for pseudo element to absolute and place it accordingly.
Here is a solution.
div
{
padding-left:20px;
}
input[type="checkbox"]{
display:none;
}
input[type="checkbox"] + label::before{
background-color: white;
border: 1px solid #ccc;
content: '';
display: inline-block;
height: 15px;
width: 15px;
text-align: center;
margin: 0 5px -2px 0;
position:absolute;
left:10px;
}
input[type="checkbox"]:checked + label::before{
content: '\2713';
}
<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Check 1</label>
</div>
There might be other attractive solutions too, this is just one.
Update
As reported by OP, there was(is?) a jumping behavior still present on demo. I added 2 more properties that might resolve the problem. I am getting the same desired results so I can't test it myself (hard to fix what you can't see).
Additional CSS
margin: 0 5px -5px 0;
line-height: 100%;
position: relative; // This should keep the input positioned in one spot.
float: left; // This should keep any extra movements of label and/or input from jumping as well.
The point of adding these 2 properties is that both of them take the element(s) out of the normal flow of the document, therefore having little to no interaction with other elements that might normally nudge or displace inputs and/or labels.
looked for that funky margin offset that'll always get added on in order to counteract that jumping behavior.
balanced out the neg and pos values
and added line-height: 100%
margin: 0 5px -5px 0;
line-height: 100%;
Also replaced the div with a fieldset it's not necessary, it just looks better. :)
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
background-color: white;
border: 1px solid #ccc;
content: '';
display: inline-block;
height: 15px;
width: 15px;
text-align: center;
margin: 0 5px -5px 0;
line-height: 100%;
position: relative;
float: left;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
}
<fieldset>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Check 1</label>
</fieldset>
i'm trying to style a radio button using just css, but i can't figure out why it does not work:
HTML
<input type="radio">
CSS
input[type="radio"]{
background: green;
}
http://jsfiddle.net/vNmLe/
Radio buttons, checkboxes and selects can't be styled very well in a cross-browser fashion using only CSS. You'll need some extra markup and a little javascript.
One technique is to wrap the input inside a div and set the input's opacity to 0. You position the input inside of the wrapping div so that it fills the entire space.
HTML:
<div class="faux-radio" data-group="radio-test">
<input type="radio" id="radio-1" name="radio-test">
</div>
CSS:
input[type="radio"] {
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 5;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0;
opacity: 0;
}
.faux-radio {
width: 12px;
height: 12px;
background: #f2f2f2;
border: 1px solid #a6a6a6;
border-radius: 12px;
display: inline-block;
margin-right: 2px;
position: relative;
}
.faux-radio.selected:after {
content: '';
width: 6px;
height: 6px;
background: #666;
border-radius: 6px;
position: absolute;
top: 2px;
left: 2px;
}
label {
margin-right: 20px;
}
With this technique you get your own style and still get all of the standard input behavior. But you have extra markup for every form element. And you'll need to add some javascript to provide the visual feedback users expect when clicking form elemens.
Here's a quick radio button example with js included: http://jsfiddle.net/xevw3/17/