How can Javascript change CSS properties of input:checked
HTML
<div class="switch-field">
<input id="radio-one" name="switch-one" type="radio" value="22" checked oninput="chng_cube_root(this.value)" />
<label for="radio-one">Square</label>
<input id="radio-two" name="switch-one" type="radio" value="33" oninput="chng_cube_root(this.value)" />
<label for="radio-two">Cube</label>
</div>
<div align="center">
<label for="fancyswitch" style="border:1px solid black">Switch button bg:</label>
<input type="color" id="fancyswitch" name="fancyswitch" value="#90452f" onchange="fancyswitch()"/>
<!-Calling fancyswitch here to change color-->
<div>
CSS
.switch-field {
display:block;
width:147px;
margin:auto;
display: flex;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #018786;
color:white;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
}
Lets say I want to change its background color-
JS
function fancyswitch(){
coloor=document.getElementById("fancyswitch").value;
document.getElementsByClassName("switch-field input:checked")[0].style.background= coloor;
/*here this is not working*/
}
Now I want that when i choose color in html "color input box " , Javascript take the color value and use it for that 'Radiobutton background'.
But i don't know how to target the " .switch-field input:checked + label "
To check whether the input is checked or not:
var x = document.getElementById("myCheck").checked;
Example
Use a checkbox to convert text in an input field to uppercase:
Assuming you have an input with id=box in your html.
document.getElementById("box").value = document.getElementById("box").value.toUpperCase();