【问题标题】:CSS clip wont work on a select box?CSS 剪辑不适用于选择框?
【发布时间】:2016-06-06 07:43:10
【问题描述】:

我想剪掉这个选择框:

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

但是整个元素是不可见的。怎么了?

【问题讨论】:

    标签: css drop-down-menu clip


    【解决方案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>

    【讨论】:

    • 感谢您的回答。我想坐标仍然让我感到困惑。我只是想取出箭头框,这似乎可以做到:rect(0px,70px,30px,0px)。我不知道剪辑已被弃用,这是个坏消息,因为剪辑路径还没有得到很好的支持。
    • @CainNuke:您应该像这样阅读坐标 - 剪切框的顶部距离实际框顶部 0px,右侧距离实际框左侧 70px,底边距离实际框的顶部 30px,左边缘距离实际框的左侧 0px。所以你会得到一个 70px 宽和 30px 高的剪裁框。我希望澄清。如果是这样,请考虑接受答案。如果没有,请让我知道我能提供什么帮助:)
    • 是的,我想我现在明白了。再次感谢您。
    • 你的意思是用于多个剪辑路径多边形的那个?
    • 知道了。我会这样做的。谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-25
    相关资源
    最近更新 更多