将css应用于强制字段的文本框

Question

1）

2）

我有一个看起来像第一张图片的文本框。我想要描绘标有'*'颜色的文本框的右下角，而不是为要填充的必填字段添加RED标记。我能够如图1所示进行格式化。我希望输出类似于第二个图像，其中红色与右下角成直角。以下是我正在使用的CSS。请帮助我如何实现第二张图像格式。

的CSS：

.txtbxcomp
{
    width: 120px;
    height: 25px;
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    text-transform:uppercase;

    font-family: Calibri;
    font-size: 14px;
    /*border-bottom-right-radius:1px;
    border-top-color:red;*/
    border-right-width:1px;
    border-right-color:red;
    border-bottom-width:1px;
    border-bottom-color:red;


}

我的文本框是

<td class="r1" width="15%">PO No:
                                    </td>
                                    <td width="18%">
                                        <asp:TextBox ID="txt_Po_No" runat="server" Height="95%" CssClass="txtbxcomp" ></asp:TextBox>
                                        <%--<span style="color: Red;">*</span>--%>
                                    </td>

Answer 1

我有一个解决方案，在文本框中添加一个额外的div，并为该额外div添加样式。我不确定，这是否是一个有效的解决方案。

<强> CSS

.txtbxcomp
{
    width: 120px;
    height: 25px;
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    text-transform:uppercase;

    font-family: Calibri;
    font-size: 14px;
    border-right-width:1px;
    border-right-color:red;
    border-bottom-width:1px;
    border-bottom-color:red;
 }

.border
{
    width: 100px;
    height: 1px;
    background:#CCCCCC;
    margin-top:-1px;
    z-index: 100;
    position: relative;
}

<强> HTML

<input type="tex" class="txtbxcomp">
    <div class="border"></div>

查找小提琴链接here

Answer 2

如果您不介意使用:: after，请尝试DEMO Here：

HTML：

<div class="custom-border">
  <input type="text" />
</div>

CSS：

.custom-border
{
  display:inline-block;
  padding:none;
  position: relative;
  border: 1px solid #CCCCCC;
}
.custom-border > input
{
    margin:0px;
    background-color: #F9F9F9;
    border:none;
    text-transform:uppercase;
    font-family: Calibri;
    font-size: 14px;
}

.custom-border:after{
    content:'';
    width:10%;
    height:100%;
    position:absolute;
    right:-1px;
    bottom:-1px;
    border: 1px solid;
    display:block;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-width:1px;
    border-right-color:red;
    border-bottom-width:1px;
    border-bottom-color:red;
}

如果您需要aspx标记，请尝试：

<asp:Panel CssClass="custom-border" runat="server">
 <asp:TextBox ID="txt_Po_No" runat="server" Height="95%" CssClass="txtbxcomp" >  </asp:TextBox>
 </asp:Panel>