Search code examples
cssdrop-down-menuclip

CSS clip wont work on a select box?

I want to clip this select box:

<select>
   <option value="">select year</option>    
   <option value="1960">1960</option>   
   <option value="1961">1961</option>   
   <option value="1962">1962</option>
</select>

This is my css code:

select {
  position:absolute;
  clip:rect(1px,1px,5px,5px);
  top:0;
  left:0;
  z-index:1;
}

but the whole element is rendered invisible. What is wrong?

Solution

  • No, clip does work for select element but you have given the values wrongly (and as very small). The values (top, right, bottom and left) specify offsets from the inside top border edge of the box and the offset for right and bottom should always be more than that for left and top for the clip to work.

    The parameters that are provided as input to this function should be read as follows:

    • The top side of the clipped box is 1px from the top side of the original box
    • The right side of the clipped box is 5px from the left side of the original box
    • The bottom side of the clipped box is 5px from the top side of the original box
    • The left side of the clipped box is 1px from the left side of the original box.

    So, your clipped box would be a rectangle with the edges (top-left, top-right, bottom-right, bottom-left) at (1,1) (5,1) (5,5) (1,5).

    Below is a sample snippet. (Note: that the value should be large enough for you to see something. In the below snippet you'd only see a 4 x 4 square with just the background color).

    select {
  position: absolute;
  clip: rect(1px, 5px, 5px, 1px);
  top: 0;
  left: 0;
  z-index: 1;
  background: red;
}
    <select>
  <option value="">select year</option>
  <option value="1960">1960</option>
  <option value="1961">1961</option>
  <option value="1962">1962</option>
</select>

    If you want to just clip out the arrow then you could use the parameters provided in the below snippet. But do note that the parameters will depend on the width and height of the content. If content is wider or taller, it would have to be changed.

    select {
  position: absolute;
  clip: rect(0px, 75px, 20px, 0px);
  top: 0;
  left: 0;
  z-index: 1;
  background: red;
}
    <select>
  <option value="">select year</option>
  <option value="1960">1960</option>
  <option value="1961">1961</option>
  <option value="1962">1962</option>
</select>

    Also, note that the clip property has been deprecated and it is better to use clip-path property. The clip-path equivalent is available in the below snippet. You can read more about the differences between these two properties in my answer here.

    Note: clip-path is currently supported only by WebKit (and with url property by Firefox). But this is the way forward.

    select {
  position: absolute;
  -webkit-clip-path: inset(1px calc(100% - 5px) calc(100% - 5px) 1px);
  clip-path: inset(1px calc(100% - 5px) calc(100% - 5px) 1px);
  top: 0;
  left: 0;
  z-index: 1;
  background: red;
}
    <select>
  <option value="">select year</option>
  <option value="1960">1960</option>
  <option value="1961">1961</option>
  <option value="1962">1962</option>
</select>