How to create a select box on mobile devices only
Actually, I am trying to style a field <select>
with CSS (no image as background), my problem is that when I view it on mobile, it shows me like a textbox, please tell me how to make it like select box with CSS. Note. I don't want any background image in css.
select {
background: -webkit-linear-gradient(white, #666);
border: 1px solid #ccc;
border-radius: 5px;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
-webkit-appearance: none;
}
source to share
You can do this using max-device-width (CSS3):
@media only screen and (max-device-width: 480px) {
select {
background: -webkit-linear-gradient(white, #666);
border: 1px solid #ccc;
border-radius: 5px;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
-webkit-appearance: none;
}
}
source to share
The recommended approach is to use media query to target specific permissions.
In your case, you can change your CSS like this:
@media screen and (max-width: 480px) {
select{
/* Add your mobile only CSS here */
}
}
select {
/* Add your non-mobile CSS here */
}
Another approach that is generally not recommended is device-type targeting by locating the user agent using Javascript.
The downside here is that all devices targeted today change tomorrow when new devices are introduced or user agents are updated.
source to share
First set up your mobiles with a css media query, then add an additional selection style before your custom selection style to reset to the default css:
@media only screen and (max-width: 480px) {
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
background: -webkit-linear-gradient(white, #666);
border: 1px solid #ccc;
border-radius: 5px;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
-webkit-appearance: none;
}
}
source to share
After adjusting the mobile phone screen resolution with a Css request, and then try adding style before the select box,
@media screen and (max-width: 480px) {
select{
/* try to place your css code to display on mobile devices */
}
}
select {
/* try to place your css code to display on large screens*/
}
source to share