Question
tick box is wrong colour on mobile devices?
- March 17, 2021
- 3 replies
- 732 views
hope you can help?
I have got a standard tick button box which when you click on it goes blue with a white tick in it.
This works on my computer but when I view it on a mobile phone the tick box is black and not blue.
Not sure how to correct this? and why it is doing it
Thanks
Tim
--------
--------
<!doctype html>
<html lang="en-GB">
<head>
<script>
body{
padding:20px;
}
.big{
font-size: 50px;
}
/* CSS below will force radio/checkbox size be same as font size */
label{
position: relative;
line-height: 1.4;
}
/* radio */
input[type=radio]{
width: 1em;
font-size: inherit;
margin: 0;
transform: translateX(-9999px);
}
input[type=radio] + label:before{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border:none;
border-radius: 50%;
background-color: #bbbbbb;
}
input[type=radio] + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
position:absolute;
content:'';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 50%;
transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
border: 0.2em solid #8eb9fb;
margin-top: -0.2em;
margin-left: -0.2em;
box-shadow: 0 0 0.3em #3b88fd;
}
/*checkbox/*/
input[type=checkbox]{
width: 1em;
font-size: inherit;
margin: 0;
transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border:none;
border-radius: 10%;
background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 10%;
transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
position:absolute;
content:'';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
position: absolute;
content: "\2713";
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
border-radius: 10%;
color: white;
text-align: center;
line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
border: 0.1em solid #8eb9fb;
margin-top: -0.1em;
margin-left: -0.1em;
box-shadow: 0 0 0.2em #3b88fd;
background-color: #3b88fd;
}
</script>
</head>
<body>
<input type="checkbox" name="checkbox_1" id="ee" checked />
<label for="ee">Checkbox small</label>
<br />
<input type="checkbox" name="checkbox_2" id="ff" />
<label for="ff">Checkbox small</label>
<hr />
<div class="big">
<input type="checkbox" name="checkbox_3" id="gg" checked />
<label for="gg">Checkbox big</label>
<br />
<input type="checkbox" name="checkbox_4" id="hh" />
<label for="hh">Checkbox big</label>
</div>
<hr />
<input type="radio" name="radio_1" id="aa" value="1" checked />
<label for="aa">Radio small</label>
<br />
<input type="radio" name="radio_1" id="bb" value="2" />
<label for="bb">Radio small</label>
<hr />
<div class="big">
<input type="radio" name="radio_2" id="cc" value="1" checked />
<label for="cc">Radio big</label>
<br />
<input type="radio" name="radio_2" id="dd" value="2" />
<label for="dd">Radio big</label>
</div>
</script>
</body>
</html>
-------
------
AdChoices