Edit: I just applied the CSS to my website and it actually works. Apparently it was in the editor it was not. Not sure what the deal was, but it seems to work fine outside of the editor.
I'm trying to create a custom checkbox based on the style here:http://codepen.io/CreativeJuiz/pen/BiHzp
I am trying to get the checkboxes background to transition when it is checked. However I am unable to get the transition to work, it just snaps right to the next color when checked.
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"] + label:before{
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
transition-duration: 0.5s;
transition-property: all;
}
/* Checked Transition */
[type="checkbox"]:checked + label:before {
background-color: #1ba8c4;
}
What am I doing wrong here?
Add transition to the checked element too.
[type="checkbox"]:checked + label:before {
background-color: #1ba8c4;
transition-duration: 0.5s;
transition-property: all;
}
It supposed to work. :)
Related
This question already has answers here:
How to make a hover effect for pseudo elements?
(4 answers)
Closed 11 months ago.
Is it possible to add :hover to ::after or ::before elements?
I've tried it in multiple ways but it's not working, is there another workaround for it.
Coincidentally, I just used this snippet for the hover::after demo.
The button shadow is using button::after, but whenever a user hovers on that button (button:hover::after), the button shadow needs to be reset to position (0,0) for matching with the original button layer.
body {
background-color: black;
}
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: transparent;
transform: translate(0.8rem, 0.8rem);
color: white;
}
button:hover::after {
content: "";
left: 0;
top: 0;
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.2s;
z-index: -1;
}
<button>
BUY
</button>
If it's still not working for you, you need to check content attribute is used in pseudo styles or not. If it's not there, no pseudo styles will be applied.
i have asp drop down list and i want to change the style of the right arrow
so , i put this line in my drop down class:
" background: url(Arrow.PNG) no-repeat right center;"
Now i want to "drow" the arrow with css3 instead of using arrow.png picture
i have this class that paint arrow:
.PaintArrow {
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-width: medium 2px 2px medium;
border-style: none solid solid none;
border-color: -moz-use-text-color #D1202F #D1202F -moz-use-text-color;
box-shadow: none;
transform: rotate(45deg);
transition: border 0.2s ease-out 0s;
position: absolute;
z-index: 1000;
right: 14px;
top: 36px;
}
How can i connect this class to the background of my drop down(on the right size)??
Thanks for answers
I don't know anything about asp.net, but if normal CSS and HTML Elements work there, you could do something like the following.
Let's say your List-Element is called dropdown-li, which is a class in our case.
Then you could use the pseudo-element :before.
.dropdown-li:before {
/* All the styles you defined above in your Question. */
}
Hopefully I could help out, greetings.
Here is a demonstration-fiddle with some edited styles: http://jsfiddle.net/f79osge3/
http://codepen.io/anon/pen/wBaGgW
I currently have what a list of items and then a button next to them on the right:
The tooltip must appear on focus and the tooltip must appear on hover - this works but the problem is that when an item is focused (after clicking on it) - the following item cannot be accessed via mouse (because preceeding is item focused!):
The tooltip must disappear when the mouse over the tooltip itself, but the focus is forcing it stay.
The test-case is here: http://codepen.io/anon/pen/wBaGgW
can anyone offer a solution that does not have any javascript? Also, the html markup cannot be changed too much. Minimal changes to HTML are OK. Just trying to prevent too much as I'll most likely need to compensate other parts of the application to fit the html changes.
Here shows the tooltip:
button:hover>.tooltip,
button:focus>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
I can hide the tooltip doing the following:
button:focus>.tooltip:hover {
visibility: hidden;
opacity: 0;
}
But that causes a crazy flickering effect as the mouse moves within the area in which the tooltip would appear.
Keep in mind the restrictions:
No JavaScript
Compatibility with IE8+ (please note, the tooltip css is coming from our global module, and I dont have direct access to change it, I am working on a separate module that I can of course override because my css loads after the global css does)
Tooltip must appear below (unfortunately)
With those restrictions, I don't know of any way to resolve your issue perfectly.
As a workaround, you can change the tooltip to be a sibling of the button, instead of a child and use the CSS adjacent sibling selector. This makes it so that when a user clicks the tooltip, it loses focus from the button and the tooltip is hidden. This will require you to fix the position of the tooltip a little (I used margin-top as a quick fix).
Code
button:hover + .tooltip,
button:focus + .tooltip,
button:active + .tooltip {
visibility: visible;
opacity: 1;
margin-top:20px;
}
<ul>
<li><span>Lorem Ipsum Dlar Set</span>
<button>X
</button>
<span class="tooltip">Hello ToolTip
</span>
</li>
...
</ul>
Live example: http://codepen.io/anon/pen/azONYP
Based my answer on this: Answer
html
<button tooltip="Tooltip text">Test</buttoN>
css
[tooltip]:before {
position : absolute;
content : attr(tooltip);
pacity : 0;
}
[tooltip]:hover:before {
opacity : 1;
margin-top:10px;
}
Here is the Fiddle
Update
Fiddle now with focus.
Added pointer event: none;
IE8 YEP YEP
No Javascript YEP
Must be below YEP
when mouse leave the tooltip, it's needs to be removed completely? (like removing the ":focus")...beacuse if it's allow for the tooltip to be visible again after mouse leave so you can use:
button:focus>.tooltip:hover
{
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-indent: -9999px;
}
codepen: http://codepen.io/anon/pen/OPVNaW
Use <a> instead of buttons and style them as buttons.
/* `border-box`... ALL THE THINGS! */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 64px auto;
text-align: center;
font-size: 100%;
max-width: 640px;
width: 94%;
}
a:hover {
text-decoration: none;
}
header,
.demo,
.demo p {
margin: 4em 0;
text-align: center;
}
/**
* Tooltip Styles
*/
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
top: 150%;
left: 50%;
margin-top: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
top: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-bottom: 5px solid #000;
border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Show tooltip content on focus */
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>CSS Simple Tooltip</h1>
<div class="demo">
<p>I’m a button with a tooltip</p>
</div>
Try refactoring your CSS to something like this:
button:hover>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
button:focus>.tooltip {
visibility: visible;
opacity: 1;
outline: none;
}
I've been procrastinating by trying to make a fancier HTML checkbox, using Font Awesome for icons. I'm almost happy with this: (CodePen)
HTML
<input type="checkbox" id="cb"/>
<label for="cb">
<i class='icon-check-sign'></i>
</label>
CSS
#cb {
display: none;
}
#cb + label {
font-size: 64px;
color: #002b36; /* black */
transition: color 1s;
}
/* hover */
#cb + label:hover > i {
color: #268bd2; /* blue */
transition: color 1s;
}
/* checked */
#cb:checked + label > i {
color: #859900; /* green */
transition: color 1s;
}
/* checked + hover */
#cb:checked + label:hover > i {
color: #dc322f; /* red */
transition: color 1s;
}
(The colours and transition duration are exaggerated to make the issue more visible.)
My problem is that the colour changes smoothly when going from the default state to the hover state (the cursor is moved over the icon), from hover to checked (the icon is clicked), and from hover+checked to checked (the cursor is moved away). However, when going from hover back to default (the mouse cursor is moved away from an unchecked icon), the color doesn't transition but changes immediately.
Why does that happen and how could it be fixed? Bonus question: can this effect be somehow done without as much extra markup? (The <i> and the <label>.)
(I also suppose this would be more usable if I swapped between a checked and unchecked icon, but that seems like it would require chaining two transitions on different elements and I've no idea if that's even possible with CSS alone.)
You're missing a > i
#cb + label > i {
font-size: 32px;
color: #002b36; /* black */
transition: color 1s;
}
Updated CodePen
if you have a transtion in the :hover like this
something:hover{
transition: ...;
}
The transition will only apply when you hover so you need to put the transition in the default style for it to transition all states
like this
something{
color: red;
transition: all 200ms ease;
}
something:hover{
color: blue;
}
So in your case you need to add the following styles.
#cb + label i {
transition: color 1s;
}
solution
demo: http://jsfiddle.net/SuunK/2/
the markup:
<input type=checkbox id=cb hidden>
<label for=cb></label>
the style:
[for=cb] {
padding: 5px 16px;
position: relative;
border-radius: 4px;
background-color: black;
transition: background-color 1s;
}
[for=cb]:before,[for=cb]:after{
content:'';
position:absolute;
}
[for=cb]:before{
width: 6px;
height: 10px;
background: white;
-webkit-transform: rotateZ(-45deg);
left: 8px;
bottom: 6px;
}
[for=cb]:after{
width: 5px;
height: 16px;
background: white;
-webkit-transform: rotateZ(45deg);
right: 13px;
bottom: 5px;
}
[for=cb]:hover{
background-color: #268bd2; /* blue */
}
/* checked */
#cb:checked + label{
background-color: #859900; /* green */
}
/* checked + hover */
#cb:checked + label:hover{
background-color: #dc322f; /* red */
}
I am trying to kick up my Web forms by styling my own radiobuttons and checkboxes.
To do this, I hide the radio/checkbox itself and create a state-indicating element on the label with the :after pseudo-class, like this:
.pn_multi label{
display: inline-block;
border: 1px dotted #FFF;
opacity: 0.6;
text-align: center;
}
.pn_multi label:hover{
border: 1px dotted #444;
opacity: 0.8;
}
.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
background: #CCE6FF;
border: 1px dotted #FFF;
opacity: 1.0;
position: relative;
}
/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {
display: block;
position: absolute;
right: 1px;
bottom: 1px;
overflow: hidden;
/* a lot more styling here, took out for space */
}
/* specific icon colors*/
.pn_multi input[type=checkbox] + label:after {
content: "\2714 ";
background: #FF9393;
color: #F22;
border: 1px solid #F22;
}
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox]:checked + label:after {
content: "X ";
background: #97FF97;
color: #063;
border: 1px solid #063;
}
Now, this works perfetly fine for the radios. I click on the label, and the little tickbox appears on the label, and on no other.
But the problem are the checkboxes:
While the checked ones still show the green tickbox, the unchecked ones, show none at all, and not the red one as it is supposed to be. it seems like the
.pn_multi input[type=checkbox] + label:after
part is not gripping at all, or like the :checked pseudo-class would overwrite its standalone.
Am i missing something major here?
Regards
Shoot!
Found my own error by copying the code to jsfiddle like BoltClock suggested it, though not using it in the end.
The porblem is this part of code
.pn_multi input[type=radio]:checked + label,
.pn_multi input[type=checkbox]:checked + label {
background: #CCE6FF;
border: 1px dotted #FFF;
opacity: 1.0;
position: relative;
}
To be exact, the position:relative. I needed this just to be able to set absolute positions on the :after elements (to show them -inside- the label)
What i oversaw was, that this way, only the checked labels were made relative.
Thus the absolute position of any :after elements created on unchecked elements resulted in positioning them outside the screen.
Solution: made every label position:relative from the beginning.
Thanks and sorry for inconvenience