Inspect the element and take a look at the Computed tab. You will see that your browser is overriding your declaration and still treating the select box as inline-block.

select {
  display:inline;
  width:300px;
  height:200px;
}

<select name="random">
    <option>some text</option>
    <option>another text</option>
    <option>more text</option>
</select>

If you want to use display:inline, you should add a wrapper and set it there instead:

.select-wrapper {
  display:inline;
}

<div class="select-wrapper">
  <select name="random">
    <option>some text</option>
    <option>another text</option>
    <option>more text</option>
  </select>
</div>

Those elements are supposed to be inline-block by default, but when i change their display property to “inline”, they keep behaving like inline-block. Their width and height is still respected. I don’t understand why? Same thing doesn’t happen with a Div element.

<select name="random">
    <option>some text</option>
    <option>another text</option>
    <option>more text</option>
</select>

CSS:

select {
    display:inline;
    width:300px;
    height:200px;
    }

And here’s an example with Div to demonstrate that changing the display property to inline makes the element behave like an inline.

<div>some text</div>

CSS:

div {
    background-color:blue;
    display:inline;
    width:500px;
    height:500px;
    }