tick box is wrong colour on mobile devices?

Explorer ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

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>
 
-------
------

Views

109

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

What browser/OS? Blue background is present in Firefox on smart phone (Android) and in chrome on tablet (Android).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

I have tried in on iphone IOS and Android Haawei P smart and get the same issue. that the background colour is black and not blue.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

What you are describing is caused by the browser default. If you want to change this, have a look at what this guy has done, https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

LATEST

Identify which browsers don't work as expected and don't forget vendor prefixes in your CSS code.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines