0

I was trying to rotate an HTML select box, which I am able to do by rotating the element in CSS, but I realized that the contents, once clicked, will be horizontally displayed.

In the case of a multiple select box, I am able to rotate the elements inside with jQuery, but not in a normal select box.

Is there a way to accomplish this?

$('option').css({
  "transform": "rotate(30deg)"
});
#sel1 {
  position: absolute;
  top: 100px;
  left: 100px;
  transform: rotate(20deg);
}

#sel2 {
  position: absolute;
  top: 100px;
  left: 200px;
  transform: rotate(20deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="sel1" id="sel1">
  <option class="opt" value="0">o0</option>
  <option class="opt" value="1">o1</option>
  <option class="opt" value="1">o2</option>
</select>

<select multiple name="sel2" id="sel2">
  <option class="opt" value="0">o0</option>
  <option class="opt" value="1">o1</option>
  <option class="opt" value="1">o2</option>
</select>

Here is the example at codepen

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
João Martins
  • 43
  • 1
  • 7
  • 2
    You cannot really style how the options are displayed. See https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element But you could mask your select box some custom html and js. – user3154108 Jan 15 '20 at 16:13
  • 2
    you will probably need to use a js plugin for this so it replaces your select with a stylable ul - I usually use [select2](https://select2.org/) – Pete Jan 15 '20 at 16:14
  • 1
    The Option element is largely browser dependent and is not really able to be manipulated like that. My advice would be to create an element that behaves like a select menu and edit its styles, while applying some js logic to achieve whatever user input you need to. – yerme Jan 15 '20 at 16:16

0 Answers0