[Resolved] Filter View CSS

[Author]

Posts

[kyleM-7]

Hello TS,

I have added a filter to my post grid view but I'm having a very hard time isolating the selectors I need to add styling.

I've managed to style the outside container but can I seem to identify how to style the drop down menu background, font etc.

Thanks for any help!

[Christian Cox]

I've managed to style the outside container but can I seem to identify how to style the drop down menu background, font etc.
Hello, some features of select elements cannot be consistently styled with CSS, since they are browser- and OS-specific:
https://css-tricks.com/dropdown-default-styling/
I think background and font styling for select tags have limited support across browers and OSes. How would you style these if Toolset were not involved - i.e. in a basic HTML select tag in a form outside of a View's custom search? If you show me how you would achieve this without Toolset, I will try to see if it's possible to port over to a custom search filter...but my guess is you won't be able to achieve it with basic CSS and HTML in a way that is implemented consistently across browsers and devices.

To achieve full display control, you probably need something like a JavaScript replacement that swaps out the native control with something completely custom. The select2.js library is one example of this type of replacement. If you're looking for CSS selectors you can use to implement other styles for a taxonomy select filter - like width, for example - you can use a CSS attribute selector to target the name attribute, usually something like:

select[name="wpv-news-category"] {
  /* your custom styles */
}

You may need to inspect the filter in the browser inpsector to find the appropriate name attribute for your case. In my example screenshot, the name is wpv-book-tax but yours will vary based on the taxonomy slug.

[kyleM-7]

Thanks so much for the detailed reply! I'm happy to add the styling directly to the HTML or in the CSS box. I'm looking just for some basics like changing the font and background color. I successfully identified the filter box tag with .form-control.

But I haven't had any luck with the dropdown menu. Below is my html, the working CSS and also the elements from inspection.

Also, and I know this is outside the service scope here, adding the filter disabled my previously functioning email function button. Perhaps I'm adding the filter in the wrong place. Screenshot attached in case you have any thoughts. Thanks Christian!

TS VIEW

[wpv-filter-start hide="false"]
[wpv-filter-controls]

<div class="search_box">
<div class="form-group" id="search_box_input">
<label class="cat_label" for="wpv-post-search"></label>
[wpv-filter-search-box placeholder="Search" output="bootstrap"][wpv-filter-reset output="bootstrap" reset_label="<i class='fal fa-redo'>" type="button" class="reset"]
<button type="submit" class="wpv-submit-trigger js-wpv-submit-trigger btn btn-secondary the_searh_button" name="wpv_filter_submit" value=""><i class="fal fa-search"></button>
</div>
<div class="form-group">
<label for="wpv-news-category">[wpml-string context="wpv-views"][/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="news-category" type="select" default_label="Filter by Topic" url_param="wpv-news-category"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

TS VIEW CSS

.form-control {
border: 1px solid #7bafde;
font-family: helvetica neue;
font-weight: 300;
margin-top: 0;
}

WEB BROWSER INSPECTION

<div class="form-group" id="search_box_input">
<label class="cat_label" for="wpv-post-search"></label>
<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed form-control" placeholder="Search"><button type="button" class="reset wpv-reset-trigger js-wpv-reset-trigger btn"><i class="fal fa-redo"></button>
<button type="submit" class="wpv-submit-trigger js-wpv-submit-trigger btn btn-secondary the_searh_button" name="wpv_filter_submit" value=""><i class="fal fa-search"></button>
</div>
<div class="form-group" id="filter_box">
<label for="wpv-news-category"></label>
<select name="wpv-news-category" class="js-wpv-filter-trigger form-control"><option selected="selected" value="0">Filter by Topic</option><option value="340b">340B</option><option value="congress">Congress</option><option value="covid">COVID</option><option value="hospitals">Hospitals</option><option value="infrastructure">Infrastructure</option><option value="medicaid">Medicaid</option><option value="medical-education">Medical Education</option><option value="medicare">Medicare</option><option value="pharma">Pharma</option><option value="surprise-billing">Surprise Billing</option><option value="telehealth">Telehealth</option></select>
</div>
<label for="wpv-news-category"></label == $0
<select name="wpv-news-category" class="js-wpv-filter-trigger form-control"><option selected="selected" value="0">Filter by Topic</option><option value="340b">340B</option><option value="congress">Congress</option><option value="covid">COVID</option><option value="hospitals">Hospitals</option><option value="infrastructure">Infrastructure</option><option value="medicaid">Medicaid</option><option value="medical-education">Medical Education</option><option value="medicare">Medicare</option><option value="pharma">Pharma</option><option value="surprise-billing">Surprise Billing</option><option value="telehealth">Telehealth</option></select>

[Christian Cox]

I'm happy to add the styling directly to the HTML or in the CSS box. I'm looking just for some basics like changing the font and background color.
It has nothing to do with where you add the CSS or the selectors you choose. Background color and font of a select dropdown are not easily managed with CSS alone, as I said before. They are browser- and OS-specific, and not easily styled with CSS in a way that is cross-browser and cross-device compatible. For a more custom select dropdown, you would need a JavaScript replacement like select2.js.

[kyleM-7]

Thanks!