• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

348

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

Votes

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.

 

 

Votes

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
Community Expert ,
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.

Votes

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
Community Expert ,
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— Product User, Community Expert & Moderator

Votes

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