Question

我试图通过仅使用css在输入周围绘制彩色边框。我不确定它是否可以用纯css完成，但也许有一个css3选择器，我已经监督了？

这是一个小小提琴：http://jsfiddle.net/tsolti/rquf4kxh/

<table>
  <tr>
    <td>
        <input class="error" value="red border"/><br/>
        <input id="1" value="green border"/>
    </td>
    <td>
        <input id="2" value="blue border"/>
    </td>
  </tr>
</table>`

.error { 
    border: 1px solid red;  
}

我希望＃1获得绿色边框，＃2获得蓝色边框。有任何想法吗？再说一遍：没有JS允许：）

重要提示：只有当第一个输入具有class = error时，才应将其着色。

Answer 1

你可以这样做：

<强> DEMO

CSS：

.error { 
    border: 1px solid red;  
}

td input.error ~ input { 
    border:1px solid green;
}

td + td input { 
    border:1px solid pink;
}

编辑问题后

编辑，包括仅在设置.error类时才设置颜色的条件：

在当前的HTML结构中，您不能仅使用CSS定位最后一个输入，因为它不是.error元素的兄弟或后代。

解决方法：

<强> DEMO

更改html标记，以便两个输入都是.error输入的兄弟：

HTML：

<table>
    <tr>
        <td>
            <input class="error" value="red border"/>
            <input value="green border"/>
            <input value="blue border"/>
        </td>
    </tr>
</table>

因此，您可以使用+兄弟选择器

来定位它们

CSS：

.error { 
    border: 1px solid red;  
    display:block;
}

input.error+input { 
    border:1px solid green;
}
input.error+input+input { 
    border:1px solid blue;
}

Answer 2

你想这样做吗？

input[value="red border"]{
   border: 1px solid red;
}
input[value="green border"]{
   border: 1px solid green;
}
input[value="blue border"]{
   border: 1px solid blue;
}

用于选择与特定元素相关的元素的CSS选择器

2 个答案: