CSS 剪辑在 select 盒子上不起作用？

Question

我想剪辑这个select框：

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

这是我的 css 代码：

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

但整个元素都呈现为不可见。怎么了？

Answer 1

不，clip 确实适用于 select 元素，但您给出的值错误（而且非常小）。值（顶部、右侧、底部和左侧）指定距框的内部顶部边框边缘的偏移量，右侧和底部的偏移量应始终大于左侧和顶部的偏移量，以便剪辑正常工作。

作为此函数的输入提供的参数应如下所示：

裁剪框的顶部距离原始框的顶部 1px
裁剪后的框右侧距原始框左侧 5px
裁剪框的底部距原始框的顶部 5px
裁剪框的左侧距离原始框的左侧 1px。

因此，您的裁剪框将是一个矩形，其边缘（左上角、右上角、右下角、左下角）位于 (1,1) (5,1) (5,5) (1,5).

下面是一个示例片段。（注意： 该值应该足够大，您可以看到一些东西。在下面的代码片段中，您只会看到一个只有背景颜色的 4 x 4 正方形）。

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>

如果你只想剪掉箭头，那么你可以使用下面代码片段中提供的参数。但请注意，参数将取决于内容的宽度和高度。如果内容更宽或更高，则必须进行更改。

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>

此外，请注意 clip 属性已被弃用 并且最好使用 clip-path 属性。 clip-path 等效项可在以下代码段中找到。您可以在我的回答 .

中详细了解这两个属性之间的区别

注意： clip-path 目前仅受 WebKit 支持（Firefox 支持 url 属性）。但这是前进的方向。

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>

CSS 剪辑在 select 盒子上不起作用？

CSS clip wont work on a select box?

css

clip

drop-down-menu