4

1)ここに画像の説明を入力

2)ここに画像の説明を入力

最初の画像のようなテキストボックスがあります。必須フィールドに入力するマークを付ける代わりに'*'、テキスト ボックスの右下隅をRED色でマークしたいと思います。画像1に示すようにフォーマットできます.2番目の画像のように、赤色が右下に直角になっているような出力が必要です。以下は、私が使用しているCSSです。2番目の画像のようなフォーマットを実現する方法を教えてください。

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 に答える