是否可以纯粹在css中制作一个带有1个尖边的1px边框输入字段？

Posted 2023-04-18

【中文标题】是否可以纯粹在css中制作一个带有1个尖边的1px边框输入字段？

【英文标题】：Is it possible to make a 1px bordered input field with 1 pointed side purely in css?

【发布时间】：2013-02-05 21:31:38

【问题描述】：

我正在尝试为应用了:hover 和:focus 伪类的搜索框构建一个1px 边框输入字段。问题是边框有 1 个尖边。

是否可以仅在 input 标记上仅使用 CSS 正确执行此操作？ （这似乎是应用伪类最直接的途径）。

这是我到目前为止所得到的（虽然 transform 在 Chrome 中不起作用..）http://jsfiddle.net/robbschiller/pxytz/

.search 
    width: 30px;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;


.search:before 
    content:"";
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    width: 23px;
    height: 23px;
    border: 1px solid #7d8082;
    border-right: 0;
    border-top: 0;
    right: 63%;
    top: 4px;

这显然没有考虑悬停和焦点状态，这是问题的一部分。我试图避免使用 :before 伪元素，因为我认为您不能将伪类应用于伪元素？

【问题讨论】：

尝试将伪类添加到伪元素中，看看会发生什么。

您不能在表单元素（或图像）上使用:before 或:after。

我宁愿将其创建为 png/svg 背景并将其包含为 base64。

对于input[type="search"] 或文本，您可以使用label 使用众所周知的技术创建一个三角形，例如：jsfiddle.net/pxytz/6 但在您编辑后，我发现这不是您的重新尝试实现。由 2 个 1 像素宽的非重复线性渐变组成的背景怎么样？

【参考方案1】：

这是完全可能的。你也可以在没有转换的情况下做到这一点，这将使它在每个支持 :before 和 :after 伪类的浏览器中都能工作。您接近它的方式的一个问题是输入元素不允许使用 :before 和 :after 进行内容注入。它在某些浏览器中工作的事实是一个怪癖而不是标准。因此，您必须将输入包装在 div 或其他内容中。 http://jsfiddle.net/jamesmfriedman/Zmd8y/

.search 
    display:inline-block;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;


.search input 
    width: 30px;
    border:0;
    line-height: 32px;
    height: 32px;


.search:before, .search:after 
    content:'';
    position:absolute;
    top:-1px;
    width:0;
    height:0;
    left:-32px;
    border: 17px solid transparent;


.search:before 
    left: -34px;
    border-right-color: #7d8082;


.search:after 
    border-right-color: white;
    border-width: 16px;
    top:0;


.search:hover 
    border-color: #028DC3;


.search:hover:before 
    border-right-color:inherit;

【讨论】：

另外 - 这是您最初与 hover 和 active 功能共享的 JSFiddle - jsfiddle.net/Zmd8y/4

【参考方案2】：

http://jsfiddle.net/jRFNq/

您可以在输入字段周围包裹一个 div。现在 :before 元素起作用了。

<div id=wrapper><input class="search"></input></div>

#wrapper:before 
content:"";
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
width: 23px;
height: 23px;
border: 1px solid #7d8082;
border-right: 0;
border-top: 0;
left: 38px;
top: 56px;

变换弄乱了它的位置。所以要小心顶部和左侧。

【讨论】：

谢谢@raffael 我认为这可能是最好的解决方案。我真的很好奇是否可以在没有包装器的情况下实现，但是 - 对于期望结果的复杂性，使用这样的包装器不会造成伤害。

不幸的是，我似乎无法找到一种方法让 :before 元素随搜索框一起移动，因为它在 :active 上扩展了大约 100 像素。我想这是因为absolute的定位？

不是解决方案，但您可以将搜索框扩展到另一侧。

是的，不幸的是它沿着容器的右侧右对齐。

【参考方案3】：

对于input[type="search"] 或文本，您可以使用label 使用众所周知的技术创建一个三角形，例如：http://jsfiddle.net/pxytz/6/，但在您编辑之后，我发现这不是您想要实现的目标。

由 5 个线性渐变组成的线条呢？ :) 仅使用 W3C 语法：http://jsfiddle.net/pxytz/8/