I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.
I am trying to close a div when a checkbox is clicked with css only not JQuery or Javascript but it seems not working properly. How can I adjust it?
div[id^="div-"] {
display: block;
}
div[id^="div-"]:target {
display: none;
}
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
How can I link the <a> click and the checkbox?
I think the only way to do this with pure css would be to have the checkbox as a direct sibling to the div:
#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}
<input id="checkbox" type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
#text{
width:100px;
height:100px;
background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
}
<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>
Using only CSS you can do something like this.
JSFiddle
The + is the adjacent sibling selector, more info at https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
#close + #div-1 {
display: none;
}
#close:checked + #div-1 {
display: initial;
}
<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>
First you should remove the anchor and just let the input element because this trick that i'm showing needs elements in the same level or the second element be in lower levels of html structure.
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div
css
div[id^="div-"] {
display: block;
}
input:checked ~ div[id^="div-"] {
display: none;
}
jsfiddle
I want to display a div when an input field is focused(active?)
In the following code, I want to display .text when .input is focused.
I'm trying this:
HTML :
<div class="box">
<input class="input" type="text" value="" />
<div class="text">text</div>
</div>
CSS :
.text { display: none; }
.input:focus .text { display: block; }
Example :
JSFiddle
You need to use the sibling CSS selector:
.input:focus + .text{
display: block;
}
Updated Fiddle
You can also use general sibling selector ~ :
.input:focus ~ .text { display: block; }
JSFiddle
Given the following html
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
You can style the input on focus using
input:focus { background: green; }
Is there a way of also styling the <label /> without JavaScript?
Thanks all
No. there is unfortunately no predecessor selector in css
input:focus -+ label { ... }
would be lovely.
having the label after the input would be dooable:
input:focus + label { ... }
you could use some positioning to display before...
For completeness, if your input field is within the label you can use focus-within:
HTML:
<label>
<input name="example" type="text">
</label>
CSS:
label:focus-within {
background: #DEF;
}
UPDATED
Make sure you check the draft as this may change: https://drafts.csswg.org/selectors-4/#relational
The :has() relational pseudo-class will allow the selection of parents for example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
This can be combined with other selectors such as :focus, :active or :not to offer a lot of potential.
Unfortunately browser support isn’t great at the time of writing: https://caniuse.com/#feat=css-has
Adding this for people finding this page in the future. CSS4 will have a parent selector allowing you to choose what element to apply the style to:
I think the current spec allows you to specify which item is matched with a ! sign - the subject selector.
label! > input {
font-weight: bold;
}
This allows far greater control than just parent, for example in this scary chain below the p tag is the target!
article > h1 + section > p! > b > a {
font-style: italic;
}
You can use an attribute selector:
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.
That will obviously only work for that specific ID. If you would like it to work for all IDs, simply leave out the ID:
label[for]:focus,
label[for]:active {
/*styles here*/
}
This will now work for all labels with a for attribute.
If you need something in between, you'll need to use classes.
You can, so long as the label follows the input in the Mark-up:
input:focus + label,
input:active + label {
/* style */
}
Okay the idea is to wrap the input, label, help, error etc. in a Flexbox Container.
Then use the + selector, to select the label element.
Note: it will work only when <label> comes after <input>
Then you define the <label> order by using the flexitem order property.
Sure you can also using classnames.
.container {
display: flex;
flex-direction: column;
}
input {
border: none;
}
label {
order: -1;
}
input:focus {
border: 1px solid red;
}
input:focus + label{
color: red;
}
<div class="container">
<input id="username" />
<label for="username">Username</label>
</div>
Yes, of course you can.
You'll need to:
Group both label and the form into a parent element (like a div)
Style the label with focus pseudo selector selector for the parent, ie .parent:focus label { color: green }
You can see a very minimal sample at jsfiddle I made.
<div class='workarea'>
<div class='hasinput'>
<label>Label 1 (should be green when active)</label>
<input />
</div>
<div class='hasinput'>
<label>Label 2 (should be green when active)</label>
<input />
</div>
</div>
.workarea {
max-width: 500px;
}
label,
input {
width: 100%;
}
.hasinput {
margin-bottom: 1rem;
}
.hasinput label {
color: blue;
}
.hasinput:focus-within label {
color: green;
}
Give your input button a style class
css style:
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
and the input html:
<input name="Bestil2" type="submit" class="book" value="Book møde" />
I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps.
Good luck :-)
Here is an alternative usign CSS grid:
As some sugested if the label is after the input then using flex or in my case using CSS grid you can place the label first.
body {
font-family: Arial;
}
.form-field {
display: grid;
gap: 4px;
}
.form-field label {
grid-row: 1;
font-size: 12px;
color: #737373;
}
.form-field input {
outline: unset;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #737373;
}
.form-field input:focus {
border-color: #328dd2;
}
.form-field input:focus + label {
color: #328dd2;
}
<div class="form-field">
<input id="myinput" />
<label for="myinput">
My Input
</label>
</div>
This can be done if you target browsers that support flexbox - see this: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
For brevity, the css there is minimal but you'll need some browser specific prefixes to extend support to somewhat older browsers.