How can I display select options as buttons?

Question

I have a form with select:

<select name="work_days" id="id_work_days" multiple="multiple">
  <option value="1">sun</option>
  <option value="2">mon</option>
  <option value="3">tue</option>
  <option value="4">wed</option>
  <option value="5">thu</option>
  <option value="6">fri</option>
  <option value="7">sat</option>
</select>

I would like to render this form field as a group of buttons by means of css and javascript (see screenshot)

I tried to display it as

<input type="button" name="work_days" value="sun">
<input type="button" name="work_days" value="mon">
<input type="button" name="work_days" value="tue">
<input type="button" name="work_days" value="wed">
...

but I couldn't get and validate data from this form on the backend. Select widget would serve the best, but I have no idea how to display it as buttons.

I would be grateful for an idea or an example.

Does this post help you? https://stackoverflow.com/questions/18931628/is-it-possible-to-convert-a-select-menu-to-buttons — ajthinking, Oct 08 '18 at 18:00
like what is being done to checkboxes since they can't be styled, you'll have to do the same, have the select hidden and mimic it with html elements and styling etc — Rainbow, Oct 08 '18 at 18:04
@ZohirSalakCeNa Almost the same, but my form field have to accept multiple choices, but I think I can add choices to the hidden field value as text and then parse it in backend. Thanks for help! — Vlad T., Oct 08 '18 at 18:08
styling options would help? https://codepen.io/peker-ercan/pen/yRgLMO — Ercan Peker, Oct 08 '18 at 18:11

Stakvino · Answer 1 · 2018-10-08T19:04:31.770

17

you can style the options in the select element

#id_work_days{
  height: 44px;
  border: none;
  overflow: hidden;
}
#id_work_days::-moz-focus-inner {
  border: 0;
}
#id_work_days:focus {
  outline: none;
}
#id_work_days option{
  width: 60px;
  font-size: 1.2em;
  padding: 10px 0;
  text-align: center;
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
  border:rgb(204, 204, 0) solid 1px;
  border-radius: 5px;
  color: rgb(204, 204, 0);
}

<select name="work_days" id="id_work_days" multiple>
  <option value="1">sun</option>
  <option value="2">mon</option>
  <option value="3">tue</option>
  <option value="4">wed</option>
  <option value="5">thu</option>
  <option value="6">fri</option>
  <option value="7">sat</option>
</select>

edited Oct 08 '18 at 19:04

answered Oct 08 '18 at 18:20

Stakvino

642
4
9

You may want to use `display: inline-block;` instead of the `float:left` – Selvakumar Arumugam Oct 08 '18 at 18:23
3

This looks great in Chrome. But is broken in both Firefox and Safari (firefox shows only the first option, the others are hidden by overflow; safari shows only the first three options, arranged vertically, with incorrect styling) – Daniel Beck Oct 08 '18 at 18:27
thx guys for pointing that out i think the problem was as @SelvakumarArumugam stated in the float left. – Stakvino Oct 08 '18 at 19:07
`inline-block` is generally a better choice than `float`, and this does work now in FF, but still not Safari. I'm not sure this can be done reliably cross-browser. – Daniel Beck Oct 08 '18 at 19:39
yes, sorry, you're right; I've edited the comment (I was accidentally still looking at the previous version in FF) – Daniel Beck Oct 08 '18 at 19:42
1

I see it has `multiple` attribute in select but I can't check more than one option (Chrome 68). And it does not work in Safari at all. But thanks for helping! – Vlad T. Oct 09 '18 at 09:51
I found that I actually CAN select multiple options but I have to hold Cmd key as with regular ` – Vlad T. Oct 09 '18 at 10:01

score 12 · Accepted Answer · answered Oct 08 '18 at 18:30

I suggest to use checkbox over select, you'll be able to style buttons fully with a bit of CSS tricks.

#id_work_days input[type="checkbox"] {
  display: none;
}

#id_work_days span {
  display: inline-block;
  padding: 10px;
  text-transform: uppercase;
  border: 2px solid gold;
  border-radius: 3px;
  color: gold;
}

#id_work_days input[type="checkbox"]:checked + span {
  background-color: gold;
  color: black;
}

<p id="id_work_days">
  <label><input type="checkbox" name="work_days" value="1"><span>sun</span></label>
  <label><input type="checkbox" name="work_days" value="2"><span>mon</span></label>
  <label><input type="checkbox" name="work_days" value="3"><span>tue</span></label>
  <label><input type="checkbox" name="work_days" value="4"><span>wed</span></label>
  <label><input type="checkbox" name="work_days" value="5"><span>thu</span></label>
  <label><input type="checkbox" name="work_days" value="6"><span>fri</span></label>
  <label><input type="checkbox" name="work_days" value="7"><span>sat</span></label>
</p>

Nice. You may want to add `user-select: none` to the `span` selector too. — Gustaf Liljegren, Nov 18 '19 at 23:10
I would like to just add that if you wanted to have a single selection instead of multiple, you would change the checkbox to a radio. — Joel G Mathew, Jun 23 '21 at 21:23

How can I display select options as buttons?

2 Answers2

Linked