I'm trying to build a multi-selection like that:
- The height and width of each option is 100.
- The options are listed horizontally.
- The options have to make a line break if they are out of the browsers width.
It looks like that at the moment: JSFiddle Demo
* {
box-sizing: border-box;
}
#data {
overflow:hidden;
padding:0;
width:100vw;
}
select {
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
}
option {
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
}
<form>
<div id="data">
<select multiple size="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
</form>
The only thing missing now is the line break.
I hope you can help! :)