Ankur Ankur - 4 months ago 8
CSS Question

Applying css to textbox for compulsory field

1) enter image description here

2) enter image description here

I have a textbox which looks like 1st image. Instead of giving

'*'
mark for compulsory fields to be filled I want to depict the text box's right bottom corner marked with
RED
color. I am able to format as shown in image 1. I want the output something like the 2nd image where the red color is in right angle to the right-bottom. Following is my css that I am using. Please help how I can achieve format like 2nd image.

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;


}


And my text box is

<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

I have a solution for that, add an extra div along with the text-box and give style to that extra div. I am not sure about, is this a valid solution or not.

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>

Find fiddle link here