从h：inputText中删除2个垂直和顶部边框

Question

我有以下JSF组件：

   <h:inputText value="#{TestComponent.hmspatient.surname}" label="Surname" styleClass="textbox" style="border:none;"/>

我想只显示底部边框（水平）并删除所有其他3.当我使用border:none时，它会删除所有边框。

Answer 1

这样做

span {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: red;
}

input {
  border-width: 0 0 2px 0;
}

<span>Heyyy</span><br>
<input type="text" value="Heyyy" >

Answer 2

您可以单独删除每个边框：

style="border-top:none; border-left:none; border-right:none;"

这将使底部边框保持默认样式。

或者，如果要特别指定底部边框样式，可以执行以下操作：

style="border:none; border-bottom:5px solid blue;"