I am trying to change a radio button form to a Star Rating System. (https://jsfiddle.net/dtau58g6/) . Unfortunately, the html is generated by WordPress so I can only edit the CSS. My problem is that the hover and checked do not work as expected.
What I want is when the second star is selected then, the first one is full as well.
Also, when we hover over the third star, the first and second stars are full as well.
If the third item is selected, and we hover over the second star, then only the first and the second stars are full. But when we remove our mouse the the third star becomes full again as it was already selected.
.form-group {
display: flex;
}
.form-check-inline .rating {
display: none;
}
.form-check-inline span {
padding-right: 2%;
cursor: pointer;
color: transparent;
}
.form-check-inline span:before {
content: '\2606';
color: gold;
}
.form-check-inline span:hover:before,
.form-check-inline span:hover ~ span:before {
content: '\2605';
color: gold;
}
.form-check-inline .rating:checked ~ span:before {
content: '\2605';
color: gold;
}
<div class="form-group">
<div class="form-check-inline">
<label class="form-check-label" for="1">
<input type="radio" id="1" value="1" name="rating" class="rating" />
<span class="wpcomment-input-option-label wpcomment-label-radio">1</span>
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="2">
<input type="radio" id="2" value="2" name="rating" class="rating" checked="checked"/>
<span class="wpcomment-input-option-label wpcomment-label-radio">2</span>
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="3">
<input type="radio" id="3" value="3" name="rating" class="rating" />
<span class="wpcomment-input-option-label wpcomment-label-radio">3</span>
</label>
</div>
</div>
The answer is 'yes you can' but with a caveat that this uses the :has() pseudo class which isn't implemented in all browsers (e.g. firefox) yet.
It's possible to tidy these rules up a bit using :where() too.
See below
.form-group {
display: flex;
}
.form-check-inline .rating {
display: none;
}
.form-check-inline span {
padding-right: 2%;
cursor: pointer;
color: transparent;
}
.form-check-inline span:before {
content: '\2606';
color: gold;
}
.form-check-inline span:hover:before,
.form-check-inline span:hover~span:before {
content: '\2605';
color: gold;
}
.form-check-inline .rating:checked~span:before {
content: '\2605';
color: gold;
}
.form-group:has(input[id="2"]:checked) input[id='1']+span:before {
content: '\2605';
color: gold;
}
.form-group:has(input[id="3"]:checked) input[id='1']+span:before,
.form-group:has(input[id="3"]:checked) input[id='2']+span:before {
content: '\2605';
color: gold;
}
.form-group:has(input[id="2"]:hover) input[id='1']+span:before {
content: '\2605';
color: gold;
}
.form-group:has(input[id="3"]:hover) input[id='1']+span:before,
.form-group:has(input[id="3"]:hover) input[id='2']+span:before {
content: '\2605';
color: gold;
}
<div class="form-group">
<div class="form-check-inline">
<label class="form-check-label" for="1">
<input type="radio" id="1" value="1" name="rating" class="rating" />
<span class="wpcomment-input-option-label wpcomment-label-radio">1</span>
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="2">
<input type="radio" id="2" value="2" name="rating" class="rating" checked="checked" />
<span class="wpcomment-input-option-label wpcomment-label-radio">2</span>
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="3">
<input type="radio" id="3" value="3" name="rating" class="rating" />
<span class="wpcomment-input-option-label wpcomment-label-radio">3</span>
</label>
</div>
</div>
Related
The form send button changes from blue styled in my css to html deafult send form button. I want my blue style in any window size. Here is my code:
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
cursor: pointer;
}
.form-inline button:hover {
background-color: royalblue;
}
<form class="form-inline" action="/action_page.php">
<input type="name" id="name" placeholder="Namn" name="name">
<input type="email" id="email" placeholder="Email" name="email">
<input type="tel" id="tel" placeholder="Tel" name="tel">
<input type="srv" id="ser" placeholder="Välj tjänst" name="ser">
<input type="date" id="date" placeholder="Datum" name="date">
<label>
<input type="checkbox" name="remember">Remember me
</label>
<button type="submit">SEND</button>
</form>
Hi I am trying to change a radio button list to actual buttons and I was successful in doing so with the following code. However, I want them listed next to each other instead of underneath each other. Any ideas what am I doing wrong?
.donations .d_amt .ginput_container label {
display: inline-block;
width: auto;
min-width: fit-content;
white-space: nowrap;
padding: 10px !important;
border: solid 2px #ccc;
transition: all 0.3s;
}
.donations .d_amt input[type="radio"] {
display: none !important;
}
.donations .d_amt input[type="radio"]:checked+label {
border: solid 2px green !important;
}
.gform_wrapper .d_amt .gfield_radio li {
display: inline-block;
}
.gform_wrapper textarea.small {
min-height: 60px!important;
}
<fieldset id="field_13_13" class="gfield gfield--width-full d_amt gfield_price gfield_price_13_13 gfield_product_13_13 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_13_13">
<legend class="gfield_label">Donation Amount<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>
</legend>
<div class="ginput_container ginput_container_radio">
<div class="gfield_radio" id="input_13_13">
<div class="gchoice gchoice_13_13_0">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 10|10" id="choice_13_13_0" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_0" id="label_13_13_0">€ 10</label>
</div>
<div class="gchoice gchoice_13_13_1">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 25|25" id="choice_13_13_1" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_1" id="label_13_13_1">€ 25</label>
</div>
<div class="gchoice gchoice_13_13_2">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 50|50" id="choice_13_13_2" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_2" id="label_13_13_2">€ 50</label>
</div>
<div class="gchoice gchoice_13_13_3">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 100|100" id="choice_13_13_3" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_3" id="label_13_13_3">€ 100</label>
</div>
<div class="gchoice gchoice_13_13_4">
<input class="gfield-choice-input" name="input_13" type="radio" value="Other Amount|0" id="choice_13_13_4" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_4" id="label_13_13_4">Other Amount</label>
</div>
</div>
</div>
</fieldset>
div input:not(:first-of-type){
display: block;
}
#left_side{
width: 40%
}
label{
width:15em;
display: inline-block;
vertical-align: top;
}
input{
width: 23em;
border-style:solid;
border:1px solid black;
}
.group div{
margin-bottom: -1px;
}
.group input {
margin-bottom: -1px;
box-shadow: none;
background-color: antiquewhite;
}
.get{
width:23em;
display: inline-block;
}
<div class="group">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" class="get">
</div>
<div>
<label for="last_name">First Name:</label>
<input type="text" id="last_name" class="get">
</div>
</div>
<!--Here is some code with grouped boxes:-->
<div>
<label for="address_1_ln_1">Address 1:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_1_ln_2">
</div>
</div>
<div>
<label for="address_2_ln_1">Address 2:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_2_ln_2">
</div>
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" class="get">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" class="get">
</div>
<dive>
<label for="zip">Zip:</label>
<input type="text" id="zip" class="get">
</dive>
How do you make text input of forms overlap borders like border: collapse on a table? By default stacking them one on top of the other has them develop a 2px border between adjacent inputs. Ideally both the borders should merge.
You could do
input {
margin-bottom: -1px;
}
I know there are a lot answers here. I searched, tried to adapt but I failed all the time, that is why I am asking now.
I have the following problem. I want, both, labels and there inputs to be in the same line: Yes o No o (o symbolize the input).
Here my following code, remark that I changed the display property of label to inline block:
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Sorry for answering, although there are a lot of similar questions and answers but adapting them did just not work...
If you want the inputs and the label to be 'bottom-aligned', try using vertical-align: text-bottom.
input[type='radio'] {
vertical-align: text-bottom;
margin-bottom: 1px;
}
div {
display: inline-block;
border: 1px solid black;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Apply vertical-align: middle with margin-top: -1px to each input[type='radio'] :
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Perfect center : just line added crossing text and button in this second snippet to show perfect center
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
.col-sm-3 {
position: relative;
border: 1px solid;
}
.col-sm-3:after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 1px;
background: black;
top: 50%;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
You might want to consider wrapping your <input> in the <label> fields.
Example:
<div class="col-sm-3">
<label>Yes
<input type="radio" name="yes/no" checked>
</label>
<label>No
<input type="radio" name="yes/no" >
</label>
</div>
This implementation will increase accessibility and usability of your inputs and doesn't require any additional css.
This question already has answers here:
Why cannot change checkbox color whatever I do? [duplicate]
(16 answers)
Closed 4 years ago.
input:checked {
height: 20px;
width: 20px;
background-color: red;
}
input:not(:checked) + label {
opacity: 0.7;
}
<html>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
<input type="radio" value="female" name="gender"> <label>Female</label><br>
<input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
<input type="checkbox" value="Car"> <label>I have a car </label>
</form>
Here i have set of radio and checkbox inputs and i am trying to change the background color of the checked input. I'm able to alter the height and width of the element but not the background-color of the inputs.
Where am doing wrong?
Here is how to do it:
input:checked {
height: 15px;
width: 15px;
border-radius:50%;
background-color: red;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:checked + label {
background-color: red;
}
input:not(:checked) + label {
opacity: 0.7;
}
<html>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
<input type="radio" value="female" name="gender"> <label>Female</label><br>
<input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
<input type="checkbox" value="Car"> <label>I have a car </label>
</form>