Question

18

How can I display select options as buttons?

rated 0 times [ 20] [ 2] / answers: 1 / hits: 25105 / 6 Years ago, mon, october 8, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emiliano

Add To Favorites

Follow

Total Points: 381

Total Questions: 109

Total Answers: 93

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

emiliano questions

1 Jest: Share Variables Between Test Files

Tue, Sep 1, 20, 00:00, 4 Years ago

1 Promise.all not working with an array of async functions

Sun, Jul 26, 20, 00:00, 4 Years ago

1 Discord.js: Fetch message from ALL channels

Fri, Jun 12, 20, 00:00, 4 Years ago

1 How to spoof a closed google form (...no longer accepting responses)? I want to submit a form after deadline

Thu, Jun 4, 20, 00:00, 4 Years ago

1 concurrently command not found but installed gloabally

Sat, Apr 25, 20, 00:00, 4 Years ago

View All

answered 6 Years ago margob · Accepted Answer

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>