I have a DIV with check boxes and labels defined by CSS style when checked:
#project input:checked + label {background-color:#787878;color:white;}
I want to make two buttons with exceptions to color:white.
Checkbox ID="B" label background-color to turn red and Checkbox ID="C" label background-color to turn blue. I can't figure it out how to add that specificity.
Thanks in advance.
EDIT: (adding HTML code)
<input type="checkbox" id="B" value="B" style="display:none;" onclick="document.getElementById('B').style.color = 'red'"><label for="B"> checkbox B </label>
This is my failed attempt with a line level change. I only posted CSS because I thought this could be done in the style.
You don't need the Javascript. Also add #B, #C { display: none; } if needed.
#B:checked + label {
background: red;
color: white;
}
#C:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="B" />
<label for="B">test</label>
<input type="checkbox" id="C" />
<label for="C">test</label>
Is this what you are looking for input[id="test"]:checked this styles inputs with specific id's and checked state.
And you cant style the background-color in a checkbox as far as i know.
Related
I want to make selections more visual for colors. For example I want a way to add either an HTML select menu or checkbox to select color.
(blue color square) - Blue
(white color square) - White
(red color square) - Red.
Is it possible to do with select menu? If not whats best way to do it with checkboxes? stylize each one differently with CSS? Or add an image in front of it?
Any code samples or links appreciated, thx.
Since you're only looking for a few colors instead of the whole range, it's probably best to build your own input. We're going to want:
input[type=radio] to select the color
Labels for the inputs containing the label and color
To do this, we can do something like this
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
...
</form>
Each div contains the HTML for each color selection: an input with the value equal to the color's hex code (although you could change this to whatever you want) and a label with a color box and the associated color name.
To create the color boxes, we can set the size and background color of the divs. Doing CSS is probably best, it's wasteful to load images that really aren't necessary.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
...
An advantage of this is that the bg-* classes are not just limited to this form - it can also be applied to other elements that need background colors.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
.bg-green {
background-color: #00ff00;
}
.bg-blue {
background-color: #0000ff;
}
.bg-black {
background-color: #000000;
}
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#00ff00" id="select-green">
<label for="select-green"><div class="bg-green"></div> Green</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#0000ff" id="select-blue">
<label for="select-blue"><div class="bg-blue"></div> Blue</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#000000" id="select-black">
<label for="select-black"><div class="bg-black"></div> Black</label>
</div>
</form>
If you want to use checkboxes instead, you can replace name="color" value="..." with just name="..." and change the input types from radio to checkbox.
I am trying to directly style <label> but based on value "black"
The html is output by a Wordpress plugin and the <label> has a #before selector which I would like to target for changing and icon color. However I wish to change the icon color multiple times based on the radio value .. In the case of value="black" I wish to change the icon to black.
Can anybody point me in the right direction?
<div class="mspc-text-wrapper">
<strong class="mspc-attribute-title">Black</strong>
<div class="mspc-radio ui radio checkbox">
<input type="radio" name="pa_colour" value="black">
<label>
::before
::after
</label>
</div>
</div>
You select it using the adjacent sibling selector + like this:
input[value=black] + label::before
label::before { content: '::before'; } /* just so the result is visible */
label::after { content: '::after'; } /* just so the result is visible */
input[value=black] + label::before { color: red; }
input[value=black] + label::after { color: green; }
<div class="mspc-text-wrapper">
<strong class="mspc-attribute-title">Black</strong>
<div class="mspc-radio ui radio checkbox">
<input type="radio" name="pa_colour" value="black">
<label>
</label>
</div>
</div>
I am currently creating a form in Wordpress using gravity forms and an image plugin, that allows me to insert images instead of radio buttons. However, I would like the image to change when the radio button is checked. My issue is that I have no idea how to approach this, and how can I target the background-image when it is directly styled in the HTML?
<div class='ginput_container ginput_container_radio'>
<ul class='gfield_radio' id='input_1_2'>
<li class='gchoice_1_2_0'><input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' /><label for='choice_1_2_0' id='label_1_2_0'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image1.com)"><img src="http://image1.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_1'><input name='input_2' type='radio' value='' id='choice_1_2_1' tabindex='2' /><label for='choice_1_2_1' id='label_1_2_1'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image2.com)"><img src="http://image2.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_2'><input name='input_2' type='radio' value='' id='choice_1_2_2' tabindex='3' /><label for='choice_1_2_2' id='label_1_2_2'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image3.com)"><img src="http://image3.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
</ul>
</div>
I would highly appreciate any help I can get to solve this issue.
Let me know if you need further information, thanks
You could be more specific on which image you want to change and from which radio button do you want to trigger the event. But still I'll give it a shot.
<input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' />
<div class="image-choices-choice-image-wrap" style="background-image:url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/d1ea2d6f6d1aa470f661fa661bd0e2fb14fd2d2c/medium-886981758498052b0532dc3a96b98adf.jpg);height:200px;width:400px">
<script>
$('#choice_1_2_0').click(function(){
// If radiobuton is checked
if ($(this).is(':checked'))
{
// Change background image
$('.image-choices-choice-image-wrap').css("background-image", "url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/7a4f69e48562c9adbee4f090033454a8ab23c135/medium-e5cbb5b7a25c93f53245e256729efff8.jpg)");
}
});
</script>
Don't forget to add jQuery if you already haven't
Live Demo: https://jsfiddle.net/jvh6xvzs/12/
The generic form is:
input + label { /* css for unchecked state */ }
input:checked + label { /* css for checked state */ }
input { display: none; }
input {
display: none;
}
input + label { background-color: red; }
input:checked + label { background-color: black; color: white ; }
<input id=option1 type=radio name=dd checked><label for=option1>select</label>
<input id=option2 type=radio name=dd><label for=option2>select 2</label>
I ended up using the guide from:
https://css-tricks.com/override-inline-styles-with-css/
The plugin added the class .image-choices-choice-selected when the radio button was checked. Therefore i used following code to do the trick:
.image-choices-choice-selected #label_1_2_2 span[style] {
background-image:url(http://newimage1.com) !important;
}
Thanks for the suggestions, I guess if this class was not added, I could have used jQuery.
in following jsfiddle, I am trying to change the color of selected radio button for two (or more) different radio groups, by only using CSS. I am missing something i do not know.
http://jsfiddle.net/2nxnk/1/
CODE:
<input type="radio" name="group0" value="1" /> One
<input type="radio" name="group0" value="2" /> Two
<input type="radio" name="group0" value="3" /> Three
<p>
<input type="radio" name="group1" value="4" /> Four
<input type="radio" name="group1" value="5" /> Five
<input type="radio" name="group1" value="6" /> Six
CSS:
input[type="radio"]:checked{ color: green; }
i do not want to use any jquery unless there is no other way. pl advice.
EDIT:
I decided to edit the question: I want to change the color of 'text of radio button'. secondly i did not want to clutter the html page with ID's if the only use is to change text color. My question now is:
1. is using the label only way?
2. seems using IDs you get capability of coloring different radio group (text again) differently. is that correct?
3. finally maybe a simple question: I though only javascript catches the action on the page, when there is no javascript how does CSS triggers the effect?
thx all for help and I also upped the last example which colors the radio button image itself.
If you want to change the text next to the radio button, you can do this way
Html
<input type="radio" name="group0" value="1" /><label>One</label>
<input type="radio" name="group0" value="2" /><label>Two</label>
<input type="radio" name="group0" value="3" /><label>Three</label>
<p>
<input type="radio" name="group1" value="4" /><label>Four</label>
<input type="radio" name="group1" value="5" /><label>Five</label>
<input type="radio" name="group1" value="6" /><label>Six</label>
Css
input[type="radio"]:checked + label {
color: green;
}
Fiddle
Probably pseudo element can help a bit:-
input[type="radio"]:checked +label {
color: green;
}
input[type="radio"]:checked:before
{
content:'.';
position:relative;
display:inline-block;
background-color:green;
width:12px;
opacity:.3;
top:-1px;
border-radius:10px;
-moz-border-radius:10px;
}
Fiddle
In most (if not all) browsers, you cannot change the colour of a radio button at all.
You can only simulate it by replacing the radio button with a different widget and trying to link it to the real radio button so it continues to work. Most implementations of this depend on JavaScript.
If you are looking to change the color of the text if respective radio button is selected, you can use + adjacent selector and wrap the text inside a label tag
input[type="radio"]:checked + label {
color: green;
}
Demo
I've removed other boxes to decrease the clutter, but logic goes same for else
Did you consider making your own radio boxes? Using labels that is
We can make labels act like radio boxes by using the "for" attribute, which then makes it clickable and react to the :checked selector. The best thing about these is a label is a basic HTML element so you can make it look exactly as you intend. Check this relatively plain example:
DEMO
<input type="radio" name="group0" value="1" id="one"/>
<label for="one"><div class="inner"></div></label><span>One</span>
<input type="radio" name="group0" value="2" id="two"/>
<label for="two"><div class="inner"></div></label><span>Two</span>
input {
display: none;
}
span,
label {
display: block;
margin: 10px 10px 10px 0;
float: left;
}
label {
width: 20px;
height: 20px;
background: #ddd;
border-radius: 10px;
}
input:checked + label{
background: green;
}
.inner {
width: 10px;
height: 10px;
margin-top: 4px;
margin-left: 4px;
background: #eee;
border-radius: 5px;
border: 1px solid #aaa;
}
Update
Here is a new fiddle with the actual buttons like I was referring to. Link: jsfiddle
Others have answered how to change the text, which I believe is what you are looking for based on your attempt. But, in the off chance you are looking to change the appearance of the button itself you could use <label for="#id"> and some CSS styling/opacity tricks to replace the buttons with images. Then, change the background color when checked. My example and fiddle use placekittens, but you could substitute the <img> sources with any image you wanted (a colored radio button with 50% opacity for example would allow you to disregard the opacity section of code.) See my code below and this fiddle. You'll have to play with the margin and padding settings to make the background color canvas the entire image, but this should give you an idea.
HTML
<input id="a" type="radio" name="group0" value="1" />
<label for="a"><img src="http://www.placekitten.com/40/40" /></label>
<input id="b" type="radio" name="group0" value="2" />
<label for="b"><img src="http://www.placekitten.com/40/39" /></label>
<input id="c" type="radio" name="group0" value="3" />
<label for="c"><img src="http://www.placekitten.com/39/40" /></label>
<p>
<input id="d" type="radio" name="group1" value="4" />
<label for="d"><img src="http://www.placekitten.com/38/40" /></label>
<input id="e" type="radio" name="group1" value="5" />
<label for="e"><img src="http://www.placekitten.com/40/38" /></label>
<input id="f" type="radio" name="group1" value="6" />
<label for="f"><img src="http://www.placekitten.com/39/38" /></label>
CSS
input {
display: none;
}
input[type="radio"]:checked + label {
background-color: green;
}
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
I'm not sure you can set css like that for a radio button.
BUT! you can set:
-webkit-appearance: none;
appearance: none;
vertical-align: bottom;
background: #fff;
border: 1px solid #dcdcdc;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
Maybe change the background color?
But that's about as much as you can change, sorry.
In case that you are already using Bootstrap (both CSS and JavaScript) you could use class selector active to achieve effect like the one you want.
See this fiddle: https://jsfiddle.net/7k0dbgsa/1/
.active
{
color: green;
}
The fiddle has been forked from https://jsfiddle.net/KyleMit/0nevkwyn/
Is it possible to style an active label with just CSS using the following markup:
<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.
For this your can use CSS :checked property for this. Write like this:
#one{
position:relative;
}
#one:checked + span{
display:inline-block;
margin-left:-20px;
padding-left:20px;
background-color: #aa2233;
}
check this http://jsfiddle.net/5TxyJ/5/
Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:
<style type="text/css">
label.active {
background-color: #aa2233;
}
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
See here.