CODEWITHSUNDEEP
htmlcss
geeksal
geeksal

Reputation: 5016

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 selected option must be highlighted.

Following is my code

.selecttodiv{
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selecttodiv option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}


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

following is the link to jsfiddle: https://jsfiddle.net/6yg4yhyy/

I am able to display all option on the single line but not when selected.

Thanks for any help.

Upvotes: 3

Views: 5930

Answers (2)

Justinas
Justinas

Reputation: 43557

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" rel="stylesheet" />
<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>

Upvotes: 2

KiwixLV
KiwixLV

Reputation: 246

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..

Upvotes: 6

Related Questions