This question already has answers here:
How do I change the color of radio buttons?
(27 answers)
Closed last month.
Would like to change the color of radio button:
However, it seems not working, still getting the default color:
You can't change the radio button color directly, You need to build your own and customize it as you want.
or you can use filter with hue-rotate() but it's not supported on Internet Explorer have a look here for more info
Edit
There is a better way to do this as #Servesh Chaturvedi mentioned using accent-color: red;
#one{
filter: hue-rotate(150deg);
}
#two{
accent-color:red;
}
<input type="radio" id="one" name="radio" value="first">
<label for="html">First</label><br>
<input type="radio" id="two" name="radio" value="second">
<label for="html">Second</label><br>
Related
This is a BuzzFeed style quiz.
My radio selections are questions that are looped through and added up to a certain number score. I can't figure out how to make them appear selected without the circle from the radio button.
This is what I have so far:
<div class="form-group">
<label
>{{ quizQuestions[0] }}
<div class="btn-group btn-group-toggle" *ngFor="let flavor of answerSetOne">
<label class="btn btn-primary active">
<input
checked
type="radio"
name="flavor"
class="btn-check"
ngModel [value]="flavor.num"
required/>
{{ flavor.name | titlecase}}
</label>
</div>
</label>
</div>
When I put data-toggle="buttons" the radio circles disappear, but it no longer selects an option for the result.
How can I make the circles disappear to show the code and the user that a certain option has been selected?
This is what it looks like now when it works.
working quiz section
Looks more like a CSS question here. You can make them disappear with :
input[type=radio] {
appearance: none;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected. For example, I have two checkboxes
Checkbox 1
Checkbox 2
When checkbox 1 is selected, it's suppose to hide checkbox 2 but it doesn't. Any ideas on what I'm doing wrong?
Here's what I've done so far
#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}
<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
You cannot choose a higher level in CSS.
For this, you must set the <input> and the <div> you want to hide to at least the same level.
So we will need to save the <div id="cover_photo_set_featured"> element from being the parent of .
But since I see that you are using ACF, I add the input right in front of it to be able to select it with CSS, so you can easily select the next <input> with the "+" selector.
We can now give "display: none" and "aria-hidden" attributes to <div>, which is used purely for help.
#cover_photo_set_featured {
display: none;
}
#cover_photo_set_featured+input:checked~#one_image_feature_image label {
display: none
}
<div id="cover_photo_set_featured" aria-hidden="true"></div>
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I have HTML structure that looks like -
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">TEXT A
</label>
</div>
I want that when the input type is checked (checked being the inbuilt class that is added automatically on checking the radio button ), I apply a style before label.
In unchecked case -
label::before{
/* something */
}
In checked case, I am writing something like this,
input[type='radio']:checked label::before{
/* something */
}
I want to apply label::before where input[type='radio']:checked but I don't know how to merge these two conditions in CSS. I just need help with the syntax.
Can anyone please tell me ?
Thanks !!
Solution
Use for attribute on label instead of nesting input inside of the label in order to use the the adjacent sibling combinator.
Example
HTML
<div class="form-check-inline">
<input type="radio" class="form-check-input" name="optradio">
<label class="form-check-label" for=“optradio”>
TEXT A
</label>
</div>
CSS
input[type='radio']:checked + label::before{
/* something */
}
References
Adjacent sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
This question already has answers here:
Style disabled button with CSS
(11 answers)
Closed 3 years ago.
I have form that I would like the save button to be disabled with different color. It is disabled since I cannot click on it, but I would like the color to be changed as well until all fields are completed.
Currently the color is blue, when it is disabled and enabled. But I would like it to change based on condition.
<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
<button md-button class="saves" type="submit" (click)="onSave()"
[disabled]="!editCardForm.valid">Save</button>
</div>
.saves {
height: 2.375rem;
width: 5.375rem;
border-radius: 1.1563rem;
color: white;
background-color: #00B8E6;
margin-left: 0.2rem;
}
You can do this with form validation if your fields are inside a form for example. Here is a quick demo of how that can be achieved.
form:valid .button {
background : green;
}
<form>
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/><br/>
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/><br/>
<input class="button" type="submit" value="Login"/><br/>
</form>
The button will only get green, if the inputs have text, as required.
I had to put the button.
button.saves:disabled {
background-color: green;
}
<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!
You can use CSS3 startswith selector:
input[id^="selectfruits"]:hover{
/* your custom style here */
}
BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.
The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.
There are several solutions to this, but the two most famous are:
Hiding the real checkbox and then showing another element (a span with an image, usually):
This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:
this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;
change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
<s:iterator value="fruits" status="ctr">
<input type="checkbox"
name="selectfruits"
class="chkFruits"
value="<s:property value='%{id}'/>"
id="selectfruits-<s:property value='%{#ctr.count}'/>">
<label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
<s:property value='%{description}'/>
</label>
<br/><br/>
</s:iterator>
that will generate the following output, that you can style with standard selectors:
.chkFruits:hover + .lblFruits {
background-color: blue;
color: white;
}
<input type="checkbox" name="selectfruits" value="AWARD"
id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1" class="lblFruits">Apple</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="CLIST"
id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2" class="lblFruits">Guava</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="HAN"
id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3" class="lblFruits">Orange</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="POS"
id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4" class="lblFruits">Melon</label>
<br/><br/>
This answer works for all check in my webpages!
input[type="checkbox"]:hover + label {
color: #fff;
border-color: #1b7aa9;
background-color: #239fdb;
}