Menu
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.
692
The right button on a mouse is typically used to provide additional information and/or properties of an item selected. For example if you highlight a word in Microsoft Word, pressing the right button will display a drop-down menu containing the cut, copy, paste, change the font etc. options.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
In order to change the selected option by the value attribute, all we have to do is change the value property of the <select> element. The select box will then update itself to reflect the state of this property. This is the easiest and most straightforward way of updating a select box state.
In case we need to select a radio button by default, we need to check it as true. Whenever the radio buttons are checked as true, then it will be autofocused by default.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
