I have the task of implementing a star review.
I assume that I need to set a rule on the label, since the inputs are hidden. My question is, how can I give the stars a color of black even after being clicked. I know that the active pseudo-class only works when being clicked. Is there another pseudo-class for this? The goal of is to do this only using HTML/CSS.
<div class="rating-stars" id="rating-stars-features">
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-1" value="1" />
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-2" value="2" />
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-3" value="3" />
<label class="rating-star" for="rating-features-1">★</label>
<label class="rating-star" for="rating-features-2">★</label>
<label class="rating-star" for="rating-features-3">★</label>
</div>
You can achieve a HTML/CSS only star rating system that has good browser support by utilising the CSS subsequent sibling selector ~ with flexbox row-reverse for left-to-right stars:
.rating-stars {
display: flex;
flex-flow: row-reverse;
width: fit-content;
}
.visuallyhidden {
display: none;
}
.rating-radio:checked~.rating-star {
color: gold;
}
<div class="rating-stars" id="rating-stars-features">
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-1" value="1" />
<label class="rating-star" for="rating-features-1">★</label>
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-2" value="2" />
<label class="rating-star" for="rating-features-2">★</label>
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-3" value="3" />
<label class="rating-star" for="rating-features-3">★</label>
</div>
Related
I have a code like this:
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
And here is jsfiddle - https://jsfiddle.net/k96x02qL/
So as you see, for some values of width of the main div, sometimes there is a situation, when label is on a new line, but radiobutton is not (picture one):
picture one
So i want to see something like this (with any value of width of main div) (picture two):
picture two
How can i implement it? For some reason i can't wrap input and it's label in one more div. Only can add some styles using "name" html attribute or something like this...
You can do this without changing the HTML by not showing the input button (opacity: 0) and putting a 'pretend' button in a pseudo element before each label.
This snippet uses a couple of Unicode circles to do this but of course you may want to do it another way - e.g. a background radio gradient or an image.
This way the label as a whole goes across whole if there isn't room for it at the end of a line.
input {
opacity: 0;
position: absolute;
left: 50px
}
input:checked+label::before {
content: '\26ab';
}
label {
position: relative;
}
label::before {
content: '\26aa';
margin-right: 5px;
position: relative;
}
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
You can use nested label/component to frame the radio component as a single box, after that add flex layout to styled the main container (div with class .days) with flex-wrap: wrap css property to auto add line break when content is bigger than container width:
.days {
display:flex;
flex-wrap: wrap;
}
<div class="days" style="width:300px;">
<label for="monday">
<input id="monday" type="radio" name="monday" value="1"> monday
</label>
<label for="tuesday">
<input id="tuesday" type="radio" name="tuesday" value="2"> tuesday
</label>
<label for="wednesday">
<input id="wednesday" type="radio" name="wednesday" value="3"> wednesday
</label>
<label for="thursday">
<input id="thursday" type="radio" name="thursday" value="4"> thursday
</label>
</div>
<br/>
Variant for your case:
<div class="days" style="width:300px;">
<div>
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
</div>
<div>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
</div>
<div>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
</div>
<div>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
</div>
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
Here is my HTML and CSS
.input[type="radio"] {
margin-left: -30px;
}
<div>
<input type="radio" name="num" value="1"><label>Label1</label>
<input type="radio" name="num" value="2"><label>Label2</label>
<input type="radio" name="num" value="3"><label>Label3</label>
<input type="radio" name="num" value="4"><label>Label4</label>
<input type="radio" name="num" value="5"><label>Label5</label>
</div>
How do I change the horizontal spacing between the radio button and the text? I'd like the text to be further to the radio button.
There you go:
The name must be the same for all radio buttons to toggle only one of them.
The class sets the right margin to 0.
And the id on the input is linked with the for attribute on the label so you can toggle the radio button by clicking the label too.
.mr0 {
margin-right: 0px;
}
<div>
<input type="radio" name="label" value="1" class="mr0" id="1"><label for="1">Label1</label>
<input type="radio" name="label" value="2" class="mr0" id="2"><label for="2">Label2</label>
<input type="radio" name="label" value="3" class="mr0" id="3"><label for="3">Label3</label>
<input type="radio" name="label" value="4" class="mr0" id="4"><label for="4">Label4</label>
<input type="radio" name="label" value="5" class="mr0" id="5"><label for="5">Label5</label>
</div>
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>