CSS 剪辑不适用于选择框？

Question

我想剪掉这个选择框：

<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)。

下面是一个示例 sn-p。 （注意：该值应该足够大，您可以看到一些东西。在下面的 sn-p 中，您只会看到一个只有背景颜色的 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>

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

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 等效项在以下 sn-p 中可用。您可以在我的回答 here 中阅读有关这两个属性之间差异的更多信息。

注意： 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>