Im trying to make this work on safari, but I haven't been able to, no matter what. It works fine on chrome/ff.
Im trying to do an expand box on click, here my code, Thanks in advance for any help:
<input class="toggle-box" id="header1" type="checkbox" >
<label for="header1">Click here</label>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing.</span>
css:
<style>
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: inline;
margin-bottom: 5px;
}
.toggle-box + label + span {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + span {
display: inline;
}
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
.rest{
display: inline!important;
}
</style>
I had a similar problem with Safari. For some reason, it seems to have problems toggling the display property.
I switched to
.hide {
opacity: 0
height: 0
}
now it seems to work. I guess visibility: hidden could work too.
You can use my toggle button
touch
<label>
<input type="checkbox">
<span class="toggle_background">
<div class="circle-icon"></div>
<div class="vertical_line"></div>
</span>
</label>
or search "autoprefixer" in google
Related
I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:
https://jsfiddle.net/gmcy12zv/5/
HTML
<div style="height:100px">
</div>
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<input type="checkbox" id="closeCheck"/>
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
I want "tooltiptext" to disappear when X button for div "close" is clicked.
CSS
#clickhere {
display: none;
}
#clickhere:not(:checked) ~ .tooltiptext {
display:none;
}
#clickhere:checked ~ .tooltiptext {
visibility: visible;
}
#closeCheck {
display: none;
}
/* #closeCheck:not(:checked) ~.tooltiptext {
visibility: visible;
} */
#closeCheck:checked ~.tooltiptext {
display:none;
}
.click-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
where am I going wrong in my approach ? is this because two checkboxes are almost nexted?
You are working with checkboxes. The checkbox hack in this case is not the best way. The "click here" text is actually a checkbox where you are providing a property checked in CSS ,this can be achived by adding another checkbox at the close button to work exactly as the one you used to open but I will not suggest that. I suggest the best practice is to use JavaScript click events. I have changed your code .I added some javascript and edited some HTML ansd CSS . Youn can check it out ,it works perfectly the way you wanted.
var dialog= document.querySelector(".tooltiptext");
var openBtn = document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");
openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})
.price-line{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/*
.price-line:active .tooltiptext {
visibility: visible;
}
.tooltiptext:hover {
visibility: visible;
}
*/
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
<div style="height:100px">
</div>
<div class="tooltip">
<label for="clickhere">
<div class="price-line">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Using only CSS.
Place the #closeCheck on top of .tooltip or .tooltiptext:
<input type="checkbox" id="closeCheck" />
<div class="tooltip"><!...->
Next hide #closeCheck and when it's checked hide .tooltiptext
#closeCheck {display:none;}
#closeCheck:checked + .tooltip .tooltiptext {display: none;}
That "+" is an adjacent sibling combinator which singles out the tag
positioned immediately next.
Example A is the fixed OP code
Example B is a different layout with a better strategy.
Example A
#closeCheck {
display: none;
}
#closeCheck:checked+.tooltip .tooltiptext {
display: none;
}
<input type="checkbox" id="closeCheck" />
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Example B
.dialog {
margin-bottom: 8px;
}
legend,
menu {
display: inline-block;
float: right;
}
label {
padding: 3px 5px;
border: 2px inset lightgrey;
border-radius: 4px;
cursor: pointer;
}
#switchA,
#switchB,
.dialog {
display: none
}
#switchA:checked+.open {
display: none
}
#switchA:checked~.dialog.A {
display: block;
}
#switchB:checked+.dialog.B {
display: block;
}
<input id='switchA' type='checkbox'>
<label for='switchA' class='open A'>Open</label>
<fieldset class='dialog A'>
<legend><label for='switchA'>X</label></legend>
<p>Beth, your son is dying! Say good-bye! Yo! What up my glip glops! Crystal poachers. There's no lower form of life. They think the galaxy's their own personal piggy bank. You can run, but you can't hide bitch! </p>
<menu>
<label for='switchA'>Cancel</label>
<label for='switchB'>Next</label>
</menu>
</fieldset>
<input id='switchB' type='checkbox'>
<fieldset class='dialog B'>
<legend><label for='switchB'>X</label></legend>
<p>Where are my testicles, Summer? I'm man enough to simply say, 'I'm going to poop', and I'd be honored to have Ron Howard involved. Dont look at me! That guy over there roped me into this. Dont mind those stare goblins.</p>
<menu>
<label for='switchB'>Cancel</label>
</menu>
</fieldset>
I want to use the checkbox-trick to show my mobile navbar. Somehow the h1 isn't showin up even when the invisible checkbox is checked. What have I done wrong?
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
</div>
<h1>DEMO ELEMENT</h1>
You're using "+" which is a sibling CSS selector, but <h1> isn't a sibling of your checkbox. It's a sibling of the checkbox's parent container. You can have 3 ways to go about it.
First way: Make it the sibling of the input by placing it inside
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked+h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
</div>
Second way: Make it the sibling of the input by taking the input out of the container
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
Third way: Make use of javascript.
I have to following HTML:
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
I want to style a checkbox + label certain way. To do that, I use
input[type=checkbox] {
display: none;
}
to remove the checkbox, and then add a own custom box with:
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
So, this works fine in every browser. Now, however, I want to change the style on :hover like this:
input[type=checkbox]:hover + label {
background-color: green;
display: block;
}
This works in Chrome just after I clicked on the checkbox, and then, for a short amount of time, the :hover style appears.
In Firefox, this style always appears on :hover.
Here is a JSFiddle.
Is it a common Chrome problem or a mistake in my CSS?
input[type=checkbox] {
display: none;
}
label span {
display: block;
margin-left: 5px;
}
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
input[type=checkbox] + label:hover {
background-color: green;
display: block;
}
input[type=checkbox]:checked + label {
background-color: yellow;
display: block;
}
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
Try putting the :hover effect on the label :
<div>
<input id="check" type="checkbox"/>
<label for="check"><span>Test label</span></label>
</div>
CSS:
input[type=checkbox] + label:hover
{
background-color: green;
display: block;
}
Here is a Demo for the same
It seems to have an issue with the display: none; state of the input.
Here's a workaround that works fine in Chrome too :
#groupInput label:hover {
background-color: green;
display: block;
}
Fiddle
.selected_area {
background-color: #c8c8c8;
height: 330px;
border-radius: 5px;
width:233px;
margin-top:5px;
}
.selected_area label input[type="checkbox"] {
display:none;
}
.selected_area label input[type="checkbox"] + .label-text:before {
content: url("../images/xxx.png");
speak: none;
font-style: noraml;
font-size: normal;
font-variant: normal;
font-transform: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
/*width: em;*/
/*display: inline-block;*/
margin-right: 10px;
}
.selected_area label input[type="checkbox"]:checked + .label-text:before {
content: url("../images/xxx.png");
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<div class="label-text"><span>This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</span></div>
</label>
</div>
Now I am using my image instead of original checkbox image.
The result was not perfect.
How do I do to make my text next to my image and if the text is too long, it will display on next line but still next to image not under it?
I hope this is what you expect. Get rid of your <span> element and put your text under a separate div. Then float the image and text div to the left and apply a margin-left to the text div so that it will not overlap with the image.
.selected_area {
background-color: #c8c8c8;
height: 330px;
border-radius: 5px;
width: 233px;
margin-top: 5px;
}
.selected_area label input[type="checkbox"] {
display: none;
}
.label-text{
float: left;
display: inline-block;
word-break: break-all;
}
#text{
margin-left: 25px;
}
.selected_area label input[type="checkbox"] + .label-text:before {
content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_unchecked.png");
speak: none;
font-style: noraml;
font-size: normal;
font-variant: normal;
font-transform: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
/*width: em;*/
/*display: inline-block;*/
margin-right: 10px;
}
.selected_area label input[type="checkbox"]:checked + .label-text:before {
content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_checked.png");
}
<div class="selected_area">
<label style="display: inline">
<input type="checkbox" value="scooter" id="">
<div class="label-text">
</div>
<div id="text">This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</div>
</label>
</div>
This is what I have for one of my page where I have a custom checkbox, just giving an example
input[type="checkbox"]{
vertical-align:middle;
margin:-3px 5px 0 0;
background: #fff;
height:17px;
width:17px;
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
input[type="checkbox"]+label:before{
content:"";
display:inline-block;
margin:-3px 8px 0 -25px;
vertical-align:middle;
height:17px;
width:17px;
}
input[type="checkbox"]+label:before{
background:url(image url) {position to box};
}
input[type="checkbox"]:checked+label:before{
background:url(image url){position to box with tick};
}
I have done the needed using a checkbox hack , do check it out :
Html :
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
<p>This is test</p>
CSS :
.myCheckbox {
float: left;
}
`.myCheckbox input {
display: none;
}`
`.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("http://www.findanyfloor.com/pub/images/checkbox.png");
}`
`.myCheckbox input:checked + span {
background: url("http://2.bp.blogspot.com/-FBS0AYl_Gug/Uo5bW7XztnI/AAAAAAAADrA/vIr35ivrZOM/s1600/Checkbox+icon+image_small.png");
}`
I hope it solves your query.
I created a custom checkbox using css3 and it turned out looking like this with the check slightly lower than where it should be...
Here is the html code applicable to this checkbox:
<div>
<input id='remember_me' type='checkbox'>
<label for='remember_me'>Remember me</label>
</div>
Here is the css code applicable to this checkbox:
input[type='checkbox'] + label:before {
content: "";
display: block;
float: left;
width: 12px;
height: 12px;
margin-right: 4px;
border: 1px solid white;
}
input[type='checkbox']:checked + label:before {
content:'✓';
color: white;
}
input[type='checkbox'] {
display: none;
}
div {
display: flex;
align-items: center;
}
Is there any way to move the check to the centre of the box?
demo - http://jsfiddle.net/victor_007/wv8ksqgL/3/
set line-height
input[type='checkbox']:checked + label:before {
content:'✓';
color: blue;
line-height: 14px;
}