Display select options side by side

I would like to know if this is possible to change the normal display style of a select element in html

The normal <select> display style is like this :

[Select]
  | [option1]
  | [option2]
  | [option3]

Is it possible to display options like this (no dropdown, options side by side) :

[option1] [option2] [option3]

There is no way to change display property of default html select tag options. You have to either create custom select using JS or with external UI libraries like bootstrap.

Another workaround is to set multiple attribute.

Here is an example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

select {
  text-align: center;
  background: yellow;
  display: block;
  white-space: normal;
}

option {
  width: 50px;
  margin: 5px;
  padding: 10px 5px;
  border: 1px solid #000;
  border-radius: 5px;
  display: inline-block;
}

<!-- language: lang-html -->

<select name="select" id="select" multiple size="3">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
    <option value="6">option 6</option>
    <option value="7">option 7</option>
</select>

<!-- end snippet -->

And then you can limit your multiple select with JS like so:

$("select").change(function () {
    if($("select option:selected").length > 1) {
		this.attr("disabled","disabled");
    } else {
		this.removeAttr('disabled');
    }
});