Display All Select Option In Single Line

By default only one selected or the default option is displayed in the select box however I want that all the select option to be displayed on the same line and among them the sele

Solution 1:

You can try using size attribute on select and floating option. On Chrome and FF it was displayed properly. IE (11) doesn't work. JSFiddle

Maybe it's better to use some select plugin where you can style it as you want..

Solution 2:

Don't style default form elements. It will cause more issues than you think. Better use some extension that provides stylable html wrapper.

E.g. select2, chosen

$(document).ready(function() {
  $('.selecttodiv').select2({
    width: '190px'
  });
})

.select2-results li {
  display: inline-block !important;
  width: 30px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>

<select class="selecttodiv" multiple="multiple">
  <option>I</option>
  <option>II</option>
  <option>III</option>
  <option>IV</option>
  <option>V</option>
  <option>VI</option>
</select>

---

Update

Also it may be checkboxes:

.check {
  display: inline-block;
}
span {
  width: 20px;
  height: 20px;
  display: block;
  color: black;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
input {
  display: none;
}
input:checked + span {
  background-color: blue;
  color: white;
}

<label class="check">
  <input type="checkbox" />
  <span>I</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>II</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>III</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>IV</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>V</span>
</label>
<label class="check">
  <input type="checkbox" />
  <span>VI</span>
</label>