Restyle select dropdown using CSS

Question

I have a select dropdown on my website and would like to restyle it using CSS so the options are individual dots rather than a dropdown menu. Is this something that is possible to use pure CSS?

Any help would be gratefully appreciated, thank you.

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

HTML/Liquid

<label class="product-tag pb-2 mt-4" for="SingleOptionSelector-{{ forloop.index0 }}">
 {{ option.name }}
</label>                   

<select class="radio-toolbar single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>

Current

Aim

Here is a stackoverflow question: https://stackoverflow.com/questions/12646725/change-the-size-of-div-by-selecting-value-from-the-dropdown And here's a jsfiddle: http://jsfiddle.net/6avqc/1/ — GucciBananaKing99, Feb 03 '21 at 11:48
Duplicate of https://stackoverflow.com/questions/52707749/how-can-i-display-select-options-as-buttons — MrUpsidown, Feb 03 '21 at 12:27

score 0 · Answer 1 · answered Feb 03 '21 at 12:21

0

select element cannot be rendered as buttons with pure CSS.

If you're able to alter the markup, perhaps it would make sense to use input[type="radio"] elements. Radio buttons can be styled with pure CSS - CSS - How to Style a Selected Radio Buttons Label?

Alternatively (if the select element has to stay in place) your aim could be accomplished with javaScript. Hiding the dropdown, displaying a button for each option and binding a click handler to the buttons which sets the respective option to selected and triggers the change event for the hidden select.

answered Feb 03 '21 at 12:21

ecolema

588
4
15

A very quick search shows that it **is** possible. – MrUpsidown Feb 03 '21 at 12:28
@MrUpsidown this is clearly not a cross-browser solution – ecolema Feb 03 '21 at 12:37
What do you mean by *this*? How is your "solution" cross-browser? It's not providing any code. Only a link to another answer which is not even yours. VLQ that is. – MrUpsidown Feb 03 '21 at 12:41
@MrUpsidown What would you recommend is the most efficient way of changing this? I'm working in liquid (Code in question) which complicates things slightly more than if I was in plain HTML. Thank you for both for your quick responses. – Tom Feb 03 '21 at 12:56
@Tom and can you not apply CSS? The rendered HTML seems to be standard code. Did you try applying the solution provided in the duplicate link (not the accepted answer but the one with the 6 upvotes)? – MrUpsidown Feb 03 '21 at 12:59
@MrUpsidown I have tried to apply the CSS to the HTML/Liquid but am getting stuck, I think my confusion is with Liquid; sorry, this is new to me. I've updated the question with the revised CSS and HTML. – Tom Feb 03 '21 at 13:40
`input[type="radio"]` is for radio inputs and you are not using radio inputs. Your question is even less clear now than before because you removed the output HTML, and you replaced it by some CSS without saying what happens and what doesn't work. I don't even know where that code comes from but certainly not from the answer I mentioned above. My advice: learn basic HTML/CSS, delete your question, open a new one that includes a [mcve] if you still have issues. And no, the issue is most likely not with Liquid but rather with simple use of HTML and CSS. – MrUpsidown Feb 03 '21 at 13:46

Restyle select dropdown using CSS

1 Answers1