Docs

[Eric]

Hey I’m having an issue with the category drop-down menu that appears on the blog posts pages under the ‘topics’ headline. The drop-down menu was customized using the CSS found below, and it looks perfect on the desktop, however on the tablet and on mobile, the designs aren’t being applied. So I was just wondering if this code could be modified so that it becomes applicable to both the mobile and the tablet. Please let me know.

Here’s my code:

.widget_categories select {
background-color: #00000c;
color: #6e98bf;
border: 1px solid #508bbf;
}

Thanks!

[Eric]

This reply has been marked as private.

[Paul R]

Hi,

Can you provide us a screenshot on how it looks in your end?

This is how it looks when I checked.

https://www.screencast.com/t/LnNpn5oz

Thanks

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

Unfortunately, there are styling specific to each mobile device/browser that can’t be overridden by CSS. Especially the iOS browsers. You may try this

  .widget_categories select {
    background-color: #00000c;
    color: #6e98bf;
    border: 1px solid #508bbf;
    -webkit-appearance: none;
}

But that will also remove the dropdown since it’s part of the appearance. Please check this too https://signalvnoise.com/posts/2609-customizing-web-forms-with-css3-and-webkit

Thanks!

[Eric]

Hey yeah that code doesn’t work because removing the dropdown isn’t really an option. It’s not possible to simply add two separate @media additions to my original code to make sure it applies for all three platforms?

[Christopher]

Hi there,

The style is being apply for all devices, please see the attachment. did you manage to fix it?

Thanks.

[Eric]

Hi no I didn’t and that’s strange because I just checked on the tablet and on mobile (on both regular chrome and incognito and it still shows it looking like my original screenshot).

Any idea as to why you wouldn’t be seeing what I’m seeing?

[Christopher]

Hi there,

Please clear cache and check again.

Hope it helps.

[Eric]

Hey I cleared the cache and temporarily deactivated the caching plugin but the problem still remains on tablet and on mobile.

Any idea as to why you aren’t seeing this?

[Rad]

Hi there,

I don’t see it added, what I see is just this

/* CATEGORY WIDGET COLORS */
.widget_categories select {
background-color: #00000c;
color: #6e98bf;
border: 1px solid #508bbf;
}

Please implement it, or just add -webkit-appearance: none; within that existing CSS.

Thanks!

[Eric]

Hi well like I said, when I add ‘-webkit-appearance: none;’ it just removed the arrows along with the drop-down, which is why I removed it from the existing code. There’s nothing else I could add to that code that would keep the arrows, keep the drop down, but just have it appearing on tablet and on mobile?

Sorry for the confusion, I thought this would be a simple fix, but I can’t seem to get it to work.

[Rad]

Hi there,

Yes, it’s not simple since each device and browser has its own rendering standard. Removing the appearance is the only way to remove default look of iOS controls.

While other create their own controls, but it’s custom coded and complex. You may wish to contact a developer that could create one for your site.

Thanks.

[Eric]

Hey as it turns out my cloudflare cache was preventing some of my customizations from being applied. So now that the caching issue is resolved, is there any other css additions that you could think of that might solve this issue? The only one that you suggested (‘-webkit-appearance: none;’) didn’t work, but is there any other options I could try? Let me know.

Thanks!

[Nabeel A]

Hi again,

You can try the following code:

select{
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQuOSAxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0NDQ0NDQ7fQo8L3N0eWxlPgo8dGl0bGU+YXJyb3dzPC90aXRsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxLjQsNC43IDIuNSwzLjIgMy41LDQuNyAiLz4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz4KPC9zdmc+Cg==) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
}

Don’t forget to clear your cache after adding the code. Let us know how this goes!

[Author]

Posts