4

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>
4

2 回答 2

2

我有一个解决方案，添加一个额外的 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>

在这里找到小提琴链接

于 2013-08-22T05:59:46.903 回答
1

如果您不介意使用 ::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>
于 2013-08-22T06:12:28.100 回答