We Keep Coding

How to customize Input slider to make volume bar

I'm trying to make volume bar with input slider with styled-components.
I could find many useful information but cannot find about how to customize valued area.
For example, if I set volume as 80, default html input range color from 0 to 80 blue. I want to change this color but couldn't find any information about it. When I set -webkit-appearance: none; I could find it becomes transparent but I just want to change colors of it. (Not the background. I know I can do that with background).
edit) This is my code
const StyledTrackVolumeSlide = styled.input`
width: 100%;
// -webkit-appearance: none; I know this code will reset default css
background: #555;
height: 0.25em;
outline: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
}
I tried these properties, but could not find one with the blue valued background color. And also cannot find in chrome dev tools. Tried all the stuffs from here
&::-webkit-slider-thumb{
}
&:focus{
}
&::-ms-track{
}
Is there any possible way to customize input slider's valued color with plain CSS?

Check out this tool: https://toughengineer.github.io/demo/slider-styler
Among other things it allows to style progress indication.
To make the slider vertical you'll have to use CSS transform, though.
Here is an example:
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '0' : e.min);
e.style.setProperty('--max', e.max == '' ? '100' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
/*generated with Input range slider CSS style generator (version 20201223)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 2.2em;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5);
-webkit-appearance: none;
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-ms-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-ms-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: #007cf8;
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: #0061c3;
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: #2f98f9;
border-color: #c1c1c1;
}
<input type="range" class="styled-slider slider-progress" style="width: 25em;" />
<br />
<!--this div is needed to cut off all that's not needed, you have to specify width explicitly-->
<div style="display: inline-block; width: 2.2em; overflow: hidden;">
<!--this div catches the size of the child block-->
<div style="display: inline-block;">
<!--this div sizes itself to the width of the <input> and makes itself square, also rotates contents-->
<div style="display: inline-block; height: 0; padding: 0 0 100% 0; transform: rotate(-90deg);">
<!--style <input> as usual as if it is horizontal-->
<input type="range" class="styled-slider slider-progress" style="width: 10em;" />
</div>
</div>
</div>
more content to the right of the vertical slider

"default html input range color" doesn't exist, the element is rendered by your browser.
You must specify -webkit-appearance: none; (depends browser), for telling to the browser "don't design the input, I take care of that".
another tutorial
Sadly you must recreate input element, you can't just override color.

If 2 different radios are selected, Do something

I essentially have 1 radio selection with a few colours, all with the same attributes, just different values, using an onclick event to pass on the value. worked great, it would allow the user to click on a color(radio) and it would display an image.
Working fiddle - https://jsfiddle.net/ktmzy8L0/
The above now includes another radio selection called pattern. But every where I searched cant seem to find an answer to solve this.
Essential - If the user selects 2 separate radios [different names], show a different picture. If you are following the jsfiddle it would show a blue diamond(I would use a url to show the image depending on the 2 radio values they choose) and the image would popup in showpicture.
The below code I originally have for jquery
function CB(colorbackground) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (colorbackground == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text('Navy Blue Pattern');
}
}

This code makes it more dynamic. Simply add data-color='ff0000' to the bg color radio buttons. Then this code will simply take the selected pattern value and bg color radio and show the title and selected bgcolor.
bgcolor = "";
pattern = "";
$("input[type='radio']").on("change",function(){
if($(this).prop("name") == "properties[Background Color]"){
bgcolor = $(this);
}
else if($(this).prop("name") == "properties[Background Pattern]"){
pattern = $(this);
}
if(bgcolor && pattern){
$('#showpictureheader').show();
$('#showpicture').show();
url = "https://www.colorhexa.com/" + bgcolor.data("color") + ".png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text(bgcolor.val() + ' ' + pattern.val());
}
});
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader{
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input data-color="000080" id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

here is, you should separate to one more function.
function CB(bg) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (bg == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
}
}
function secondcb() {
$('#showpictureheader').text('Navy Blue Pattern');
}
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader {
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue" onClick="CB(this.value);"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input onchange="secondcb()" id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

How to animate the fill of an arc in CSS? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance

Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?

maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

How to conditionally add "fade to black" mask to input field?

I'm implementing a design where a "fade to black" mask is expected to appear on the left side of the input once the text content reachs the maximum visible width of the input box.
The image bellow illustrates better what I'm trying to acomplish:
I already implemented part of it, with the code below:
var input = document.querySelector('#input');
var container = document.querySelector('.myInput');
input.addEventListener('keydown', function(e) {
if (input.value.length > 12) {
container.classList.add('faded');
} else {
container.classList.remove('faded');
}
});
body {
background: #000;
}
.myInput {
position: relative;
}
.myInput input {
font-family: "Trim", "NOW G", "Oscine";
font-style: normal;
font-weight: 500;
font-size: 28px;
background: #000;
padding: 12px;
color: #fff;
box-sizing: border-box;
margin: 0 0 0 10px;
border: 1px solid #ccc;
width: 200px;
}
.faded::before {
display: block;
background-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0));
width: 20px;
position: absolute;
content: "";
left: 15px;
top: 1px;
bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myInput">
<input id="input" placeholder="Search" />
</div>
My problem now is how to add this mask conditionally (that is, removing the hardcoded 12 chars length and the input hardcoded width) and also, how to create a responsible solution that will work with all widths and all text sizes.
Any ideas?

You can find if the input is overflown as
(input.offsetWidth < input.scrollWidth)
Also I'd recommend listening to input event instead of keydown to catch paste as well.
See the snippet below:
document.addEventListener('input', function(e) {
if (e.target.nodeName.toLowerCase() === 'input') {
var input = e.target;
var container = input.parentNode;
if (input.offsetWidth < input.scrollWidth) {
if (!container.classList.contains('faded')) {
container.classList.add('faded');
var cs = getComputedStyle(input);
container.querySelector('.shadow').style.left = [
'border-left-width', 'margin-left', 'padding-left'
].reduce(function(a, e) {
return a += parseInt(cs[e])
}, 0) + 'px';
}
} else {
container.classList.remove('faded');
}
}
});
body {
background: #000;
}
.myInput {
position: relative;
margin:1rem;
}
.myInput input {
font: normal 500 28px "Trim", "NOW G", "Oscine";
background: #000;
padding: 12px;
color: #fff;
box-sizing: border-box;
margin: 0 0 0 10px;
border: 1px solid #ccc;
width: 200px;
}
.faded .shadow {
position: absolute;
top: 1px;
bottom: 1px;
width: 20px;
background-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0));
}
#input2 {
margin-left: 20%;
padding-left: 3em;
}
<div class="myInput">
<input id="input" placeholder="Search" />
<span class="shadow"></span>
</div>
<div class="myInput">
<input id="input2" placeholder="Search" />
<span class="shadow"></span>
</div>

changing checkbox style on uncheck

I have a list of checkboxes in a page with all the boxes are checked by default. When user clicks on any particular checkbox to uncheck it, the background color of the checkbox should be changed or the boxes should be checked with cross mark in a red color.
I tried the following on uncheck,
document.getElementById("checkBooxId1").style = "background-color:red";
This is not working.
Also, I would like to do this on some occasion not all the time. So, when the parent checkbox is checked and the child is unchecked, the style of the unchecked checkebox should be different. Whereas, if the parent is also not checked, then the child and the parent should be in normal style.
Is there any other way?

As I said before, you can't change the background-color of a checkbox, but there are workarounds to get the desired effect.
Using JavaScript:
var defaultState = "checked";
var fakecboxes = document.getElementsByClassName("fakecbox");
for (var i = 0; i < fakecboxes.length; i++) {
(function (i) {
if (!fakecboxes[i].classList.contains(defaultState)) {
fakecboxes[i].classList.add(defaultState);
}
fakecboxes[i].onclick = function () {
if (!this.classList.contains("checked")) {
this.classList.add("checked");
this.classList.remove("unchecked");
} else {
this.classList.remove("checked");
this.classList.add("unchecked");
}
};
})(i);
}
body {
user-select: none;
-webkit-user-select: none;
}
.fakecbox {
width: 12px;
height: 12px;
box-sizing: border-box;
margin: 3px;
margin-left: 4px;
display: inline-block;
position: relative;
box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
background-color: rgb(222, 222, 222);
background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%);
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-top-color: rgb(178, 178, 178);
border-left-color: rgb(167, 167, 167);
border-right-color: rgb(167, 167, 167);
border-bottom-color: rgb(167, 167, 167);
}
.fakecbox:hover {
border-top-color: rgb(168, 168, 168);
border-left-color: rgb(157, 157, 157);
border-right-color: rgb(157, 157, 157);
border-bottom-color: rgb(157, 157, 157);
box-shadow: 0 1px 0 rgba(0, 0, 0, .125);
background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%);
}
.fakecbox:active {
border-top-color: rgb(173, 173, 173);
border-left-color: rgb(161, 161, 161);
border-right-color: rgb(161, 161, 161);
border-bottom-color: rgb(161, 161, 161);
background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%);
box-shadow: none;
}
.fakecbox.checked::after {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
}
.fakecbox.red {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
.fakecbox.redonuncheck.unchecked {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
<input type="checkbox" />Normal checkbox
<br>
<div class="fakecbox"></div>Fake checkbox
<br>
<div class="fakecbox red"></div>Fake red checkbox
<br>
<div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox
This one using only CSS. You can remove the last label <label for="cbox">Normal checkbox</label>. Checkbox still works. You can modify the span for unchecked state and input:checked + span for checked state.
.checkbox input {
display: none;
}
.checkbox span {
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
}
.checkbox input:checked + span {
background-color: lime;
}
<label class="checkbox">
<input type="checkbox" name="checkbox"/>
<span></span>
</label>
<label for="checkbox">Normal(modified) checkbox</label>

http://jsfiddle.net/2ck4tfj3/1/
input[type=checkbox] {
position: relative;
}
input[type=checkbox].awesome::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
and just use this to change the background to red dynamically: document.getElementById("checkbox1").className = "awesome";
I used CSS pseudo elements to style the input checkboxes when they have the class awesome. You can change whether an element has this class with JavaScript.

you can use CSS psuedo elements.
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
So when a checkbox is checked, and you are targeting the label immediately after it:
CSS:
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
The label text will turn from grey italic to red normal font.
HTML:
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
Taken from CSS-Tricks
Hope this helps