I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
Related
Here is a code from W3Schools on how to create a ripple effect button.
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 50%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 15s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
Can someone help me understand the code bit by bit, especially why the padding and margin in the button:after are so highly set and how the zero values in the button:active:after affect the animation?
Any help will be highly appreciated. (I know the basic of padding and margin, but I think that I am not getting the 'after' class and the technique used).
:after is not a class is a pseudo-element that it's used to add content to the content of an element .see here ::after
so it uses that pseudo-element to create a new space with CSS that it's not defined in your initial HTML . it's like making another element inside the button
for eg if you had a structure like this :
.no_pseudo, .with_pseudo {
width:100px;
height:100px;
background:red;
margin:40px 0
}
.likeAfter {
background:blue;
width:50%;
margin:0 auto;
height:100%;}
.with_pseudo {
position:relative;
}
.with_pseudo:after {
content:"";
position:absolute;
background:blue;
width:50%;
margin:0 auto;
height:100%;
lefT:0;
right:0;}
<div class="no_pseudo">
<div class="likeAfter">
</div>
</div>
<div class="with_pseudo">
</div>
as you can see, the :after element can be used just like a child element inside a div. but you can achieve that just by using CSS .you don't have to change the HTML structure.
so this trick is using :after , which has a background: #f1f1f1; and it's positioned under the button ( margin-top:-120% ) . and then, when you click on the button , it has (margin:0 ) that's how this effect is done
also with paddings and opacity.
i would've done it differently :
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
z-index:2;
}
.button:after {
content: "pseudo element >!<";
color:green;
background: #f1f1f1;
display: block;
position: absolute;
bottom:0;
left:0;
height:0%;
width:0%;
opacity: 0;
transition: all 3s;
}
.button:focus:after {
width:50%;
height:100%;
opacity: 1;
}
<button class="button">
I AM A BUTTON
</button>
i positioned the :after at the bottom-left of the button , with width:0%;height:0%;opacity:0 ;
then, when i click on the button, i added width:50%;height:100%;opacity:1 on the :after and that's how you get that effect . maybe is not exactly the same as in your example but it works.
also added some content:"" to the :after element. you can add text,images etc. almost anything. but if you don't want to add anything, you must use content:"" and leave it empty, otherwise the :after is not created.
:before is the same as after > see here more about pseudo elements
css_pseudo_elements or here Pseudo-elements
there is much to talk about this things, but i hope you kind of understood what's going on with the pseudo-elements and with this effect. let me know. cheers !
EDIT AFTER COMMENT :
1. ' transition backwards ' is because of the :active state ( :active ) . the button has the :active state only when you click on it . after that it's not active anymore and :after goes back to it's original style
and because it has transition:15s it takes 15 sec to get back to it's original position and color.
the same with the ripple effect. you click on the button, the effects starts , :after gets from one style to another , for example from opacity:0 to opacity:1 then because the button doesn't have :active state anymore, :after returns to it's original style of opacity:0 , all this happens in 15 seconds ( because of the transition:15s )
2
content:"" inserts the space for the :after or :before into the HTML structure
you need content:"" on :after because , as i said in the beginning ,
::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is
key word content . so even if you don't insert text or images but you just want to insert an empty space , you need to set up a content:"" which means empty but still there .
elem:after{content:""} generates a space with width:0;height:0 after the element.
i will make two short examples , one with something inside content:"" one with nothing inside it
h1:before {
content:"i am before < < < ";
font-size:14px;
color:red;
}
h1:after {
content:" > > > i am after";
font-size:14px;
color:blue;
}
h2:before {
content:"";
background:red;
width:20px;
height:20px;
position:absolute;
}
h2:after {
content:"";
background:blue;
width:20px;
height:20px;
position:absolute;
}
<h1>Text Before me </h1>
<h2>Just empty content </h2>
ok it's supposed to be really simple but for some reason it isn't working. when i hover over an image a box with information is supposed to pop up like when you hover over a question mark and the question is answered.
.infodot {
position: relative;
}
.redinfo {
background-color: red;
color: white;
padding: 10px;
border-radius: 5px;
position: relative;
width: 280px;
display:none;
}
.infodot:hover .redinfo {
display: block;
}
<img src="http://www.brokenarrowwear.com/embroidery/img/infodot.png" class="infodot" />
<p class="redinfo"><strong>PLEASE NOTE</strong> - Info dot information</p>
You need 'next sibling', actually: adjacent sibling selector:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
.infodot:hover + .redinfo {
display: block;
}
Demo: http://jsfiddle.net/d1taznfb/
Another option is to change your markup, so you can use different selector(s).
I have a select tag which I am trying to give some style.
<select class="points-selection"
ng-options="line as line.pick for line in slip.lines">
</select>
then I have this
.points-selection {
background-color: get-color(nieve);
border: 0;
border-radius: get-space(xxx-small);
color: get-color(night);
cursor: pointer;
margin-top: get-space(xxx-small) + 1.5;
padding: get-space(xxx-small);
text-indent: 32.5%;
width: 100%;
}
I have that text-indent prop set to 32.5%.
In chrome is doing this
which is exactly what I need.
But I have this on Firefox
clearly the text is not centered in Firefox, that's my issue so far.
so what should I do to fix it ?
Try normalizing the css for every browser
*{
margin:0px;
padding:0px;
}
or go to this link Normalize.css in GitHub
I'm trying to trigger a div from display:none; to display:block; when a link is hovered. I've tried to achieve the reaction through an adjacent sibling selector but the target div doesn't change from none to block. I think it's because I'm not defining the correct hierarchy, but I have no idea what else to try.
<div id="home_bar">
<div id="welcome_left">
I’m Anthony.
</div>
<div id="welcome_right">
<div id="name_desc">I love lamp.</div>
</div>
</div>
The above HTML is powered by the following CSS:
#home_bar {
display: table-row;
width: 888px;
border: 1px solid red;
margin-top: 80px;
}
#welcome_left {
letter-spacing: -1px;
font-size: 36pt;
line-height: 36pt;
width: 666px;
color: #606060;
cursor: default;
display: table-cell;
float: left;
}
#welcome_right {
float: right;
width: 200px;
display: table-cell;
position: relative;
}
#name:hover { color: #00A68D; cursor: default; }
#name_desc {
top: 50px;
position: absolute;
display: none;
}
#name:hover + #name_desc { display: block; }
I previously tried the following as the last line:
#home_bar > #name:hover + #name_desc { display: block; }
As that seemed like the right course of action based on this question, but I still can't achieve the desired affect (to be clear, the desired effect is: hover a link on the left, trigger the appearance of content on the right).
Any thoughts with regards to what I could be doing differently here? I'm hoping to avoid jQuery if I can as I'm normally a lot more comfortable working with CSS, but I'm completely stuck.
The adjacent sibling combinator has to be used with sibling elements. In this instance, #welcome_left and #welcome_right are the siblings. Therefore, when #welcome_left is hovered over, you will select the sibling #welcome_right's child element #name_desc.
EXAMPLE HERE
#welcome_left:hover + #welcome_right #name_desc {
display: block;
}
Unfortunately, you can't use the following, because #name and #welcome_right are not sibling elements. In CSS, you currently can't transverse the DOM, therefore there aren't any parent selectors.
#name:hover + #welcome_right #name_desc {
display: block; /* doesn't work because they aren't siblings .. */
}
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen