Archived topic
Style is not adopted in the smartphone
11 replies · Started by Samuel on August 8, 2022
Hello,
I have the following code in the Customizer as an example:
input {
box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%);
border-color: #fff!important;
}I would expect all input fields to get this style. This works quite well so far. In the desktop all form fields have this style. But on the smartphone this style does not work. Why?
Hi Samuel,
Can you try this instead?:
input, textarea {
box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%) !important;
border-color: #fff!important;
}Thanks Fernando,
the Style is still not applying... :(
Hi there,
try including this property in your CSS:
-webkit-appearance: none;
Hi David. There it is! I have to learn more about -webkit-appearance :)
Glad to be of help!
@David i have a Problem. When I use the code you gave me, the boxes to log in are hidden everywhere.
The Code i use:
input, textarea {
box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%) !important;
border-color: #fff!important;
-webkit-appearance: none;
}If i Delete -webkit-appearance: none;, then it works, but the Topic Problem still exists: https://www.screencast.com/t/bVi37H4muP
I tried viewing your site from my end on a smartphone, and I can’t seem to replicate both issues.
I also tested on my personal phone to be sure, and couldn’t seem to replicate it there as well.
What browser and device are you using? Have you tried viewing the site in a different device?
Can you try this?:
input, textarea {
box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%) !important;
-webkit-box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%) !important;
-moz-box-shadow: 0 0px 6px 0 rgb(0 0 0 / 10%), 0 6px 10px 0 rgb(0 0 0 / 10%) !important;
border-color: #fff!important;
}Thanks Fernando for your Support. If i use your code, the Checkboxes are still visible, but the Form-Shadow is still not displaying. Only if i use -webkit-appearance: none; But then i get the Problem i mentioned above...
So on Desktop, Chrome everything is fine. The Problem with the missing Shadow is with my Device (iphone 13).
You can style the checkboxes separately eg.
input[type="checkbox"] {
-webkit-appearance: auto;
}Amazing. It works fine! THANKS!
Glad to hear that
