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

以下是一个示例代码段。（注意：该值应该足够大，以便您查看内容。在下面的代码段中，您只能看到一个只有背景颜色的4 x 4正方形。）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

另请注意，clip 属性已弃用 ，最好使用clip-path属性。以下代码段中提供了clip-path等效内容。您可以在我的回答here中详细了解这两个属性之间的差异。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS剪辑不会在选择框上工作？

1 个答案: