Hi @cambabutonono
Not sure I understand your question correctly. When you say the style is broken or missing in the front end, what are you seeing? And what do you expect to see? If you mind sharing a screenshot to understand more, that would be helpful. In any case, you’re right that styling the select element is not possible in the Editor yet, but in WordPress 6.9 the support to styling forms via theme.json was introduced. It requires some extra steps, but this post explains how doing it.
With the approach you took, I tried styling the select element of Term List block via CSS and I see the visual changes correctly in both editor and front end. Here are two screenshots
Editor: https://share.cleanshot.com/lpTHSwqW
Front end: https://share.cleanshot.com/KDrDF6wd
I hope the above helps.
Hi @fcoveram Thanks for your response. I have attached the screenshot in my original post. So I don’t seem to have the same layout of the dropdown on the front-end as you are showing—just the default browser style for dropdowns. Strange. Perhaps it’s something on my end, since your site is working fine. I have some customizations in my child theme and also Jetpack forms enabled. Not sure why that would break the styles, but…
I took a look at the page you’re working on (https://mattrs.co.uk/work) and I don’t see any custom style applied to the select element. Therefore, it renders the browser one. Here is a screenshot of the page opened in Chrome and Safari (left and right, respectively): https://share.cleanshot.com/9Q1tJhZ6
Based on the screenshot attach in your initial comment, it seems you’re editing the page in a Chrome-based browser, but then seeing the frontend page on Safari. Could that be correct?
If styles look correct in the editor but not on the front-end, it might be an issue with plugins or extra CSS. But when looking at the element via Chrome’s inspector. I don’t see any style. Here is a screenshot: https://share.cleanshot.com/rNnrtV3b
Yes, this is exactly what I mean – my theme is not loading any extra styles for dropdowns on front-end, like in your example that you posted earlier (however it does in the block editor just fine). Ive tested that on both chrome and safari. Thanks for looking into it.
This seems to be a bug in the theme as the backend in Canvas should reset the style. So if you want to use the style you see in the backend in the frontend page, you can add the following CSS.
select {
font-size: 14px;
line-height: 2;
color: #2c3338;
border-color: #8c8f94;
box-shadow: none;
border-radius: 3px;
padding: 0 24px 0 8px;
min-height: 30px;
max-width: 25rem;
-webkit-appearance: none;
background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
background-size: 16px 16px;
cursor: pointer;
vertical-align: middle;
}
The above is what was set in .wp-core-ui , the class defined for the select element.
