This question already has answers here:
Does opacity:0 have exactly the same effect as visibility:hidden
(9 answers)
Closed 5 years ago.
When i set the checkbox property "visibility: hidden" it acts like "display: none". Meaning it's is not visible and not accessible. For example in the code below i overlayed my checkbox over the text creating the effect that when the text is clicked the checkbox should be checked. Setting the "opacity:0" will create the effect for me. I just want an explanation why "visible:hidden" kinda removes the checkbox.
To test this you can remove the visibility property to show the checkbox
div {
position: relative;
width: 200px;
border: 1px solid red;
}
input {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
visibility: hidden;
height: 100%;
cursor: pointer;
/**opacity: 0;**//**I can use this instead tho**/
}
<div>
<input id="units" type="checkbox" value="13"><span class="btn">TEST</span>
</div>
hi this link will show you the differences between them it has good examples
CSS : Visibility, Opacity and Display
Related
This question already has answers here:
What’s the point of the ::before and ::after pseudo-element selectors in CSS?
(5 answers)
How to style a checkbox using CSS
(43 answers)
Closed 10 months ago.
The company I work for has an in-house extension of bootstrap classes. I'm having difficulty using the checkbox they provide, so I have to dive into their code. I'm starting with this HTML snippet:
<div class="checkbox XXXbs-checkbox">
<label for="checkbox-id">Some Text</label>
<input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>
Their checkbox css contains this ("XXX" is in place of a string that would identify the company I work for):
.XXXbs-checkbox input[type=checkbox] {
opacity: 0;
margin-left: 4px;
cursor: pointer;
z-index: 1;
width: 100%;
}
Opacity is 0, making the actual checkbox from the above HTML invisible. Meanwhile, they also have this:
.XXXbs-checkbox>label::before {
font-family: XXX-icon;
content: "\e903";
font-size: 32px;
position: absolute;
top: -15px;
left: 0;
}
to place an empty checkbox before the label, and this:
.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
content: "\e904";
color: #000
}
to render a box with a check mark in it.
My question is, why would you use this approach? Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Because the amount of styling you can apply to a checkbox itself is very, very limited.
This thread (Text only radio buttons) provides a way to make radio buttons that show only text, surrounded by a border that changes color when the button is selected.
The problem is that keyboard navigation does not work in this setup. That's not surprising; it's hiding the radio button and displaying only the labels.
Is there a way to have text-only radio buttons that work with keyboard navigation?
Thank you.
The only solution I can think of without Javascript is to make the button invisible without using display: none, because it doesn't render the button and so you can't navigate it.
This can be done trough opacity. This will make it invisible, but it'll still be there on its spot. In order to make it not interfere with the other elements, you can set it to position: absolute. All troubles gone.
See:
label {
display: inline-block;
width: 100px;
height: 50px;
border: solid 2px red;
}
input[type="radio"] {
opacity: 0;
position: absolute;
}
input[type="radio"]:checked + label {
border: solid 2px green;
}
<input type="radio" id="test" name="jeff">
<label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff">
<label for="test2">Steak</label>
An addition as mentioned by CBroe is to use the .visuallyhidden class instead of just using opacity. The compatibility might be better.
input[type="radio"] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
The following W3C page describes a way to make custom radio elements using ARIA:
ARIA radiogroup and radio Example
You should not use any CSS trick with native radio elements as it could led to unexpected behaviour. For instance focusing a native radio element with a screenreader may not always display the focus indicator (outline) around the label, but around the checkbox, which is problematic for people with low vision if that checkbox has been hidden.
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I am building a store website and I have problem with variations of the products. So I have the main product. I have 3 boxes with variations on color and when I hover them it changes the color, but the update of the site requires from me to change it from hoverable to clickable. It works when I change the CSS from
img:hover
to
img:active
but after the click the color returns to previous one. So can after click of the color to remain there instead of going back to previous color. And can it be done without JAVASCRIPT
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #F4F4F4;
}
.box label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box input {
visibility: hidden;
}
.box input:checked + label {
background-color: red;
}
<div class="box">
<input type="checkbox" id="test">
<label class="color" for="test"></label>
</div>
:active means "while being clicked on", not "has been clicked on in the past". It is designed for such things as creating a 3D button depresses when you click on it effect.
CSS has no means to track state.
You might be able to hack something using :focus, but that is designed to indicate what you will activate if you were to press Enter, so is almost never a good choice for this sort of thing. It also only allows you to have one thing focused at a time.
If you want to track state for interactive things: use JavaScript.
CSS is not designed for that.
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I have a button and on a :hover I would like an after element to show. But I can't see it. Is it possible to have an :after element on a button?
.button {
cursor: pointer;
height: 30px;
}
.button-primary {
border: none;
}
.button-primary:hover:after {
display: block;
position: relative;
top: 3px;
right: 3px;
width: 100px;
height: 5px;
}
<button class="button button-primary">My button</button>
This should now work on all up to date browsers.
To get it to work, you need to add content:""; in your after.
Yes you can use it – as long as you as don't need to support some very old browsers, e.g. MS IE 7 or lower. I don't know of any other browser that doesn't understand pseudo elements on empty HTML tags. In fact I already used it in several production sites without any problems.