Apply CSS to only one input field

Question

I Have a jsp page. It contains no.of input fields. I added Css for my jsp page. Now the problem is, when i use the css attached below it is applying for all input fields.I just want to apply it for UserName field only.

JSP Page

<form method="post" action="./DataCaptureServlet" autocomplete="OFF">
        <table id="table1" align="center">
            <tr>
                <th>Data Capturing Screen</th>
            </tr>
        </table>
        <br>
        <table id="finalTable" align="center">
            <tr>
                <td>
        <table id="table2">
            <tr>
                <td style="padding-left: 635px"><b>User Name</b><td>
                <td><b>:</b></td>
                <td><input type="text" name="username" id="username" value="Asha" readonly="readonly"></td>
            </tr>
        </table>
        <br>
        <br>
        <table align="center" id="table3">
            <tr>
                <td><b>Date Of Capture :</b></td>
                <td><input type="text" name="dateofcapture" id="dateofcapture"></td>
                <td><b>Time Capture :</b></td>
                <td><input type="text" name="timecapture" id="timecapture"></td>
            </tr>
            <tr>
                <td><b>Adjuster Co :</b></td>
                <td><input type="text" name="adjusterco" id="adjusterco"></td>
                <td><b>Adjuster Name :</b></td>
                <td><input type="text" name="adjustername" id="adjustername"></td>
            </tr>
            </table>
        <table align="center" id="table4">
            <tr>
                <td><b>Owner Name :</b></td>
                <td><input type="text" name="ownername" id="ownername"></td>
                <td></td>
                <td><b>Tel:1)</b><input type="text" name="telno1" id="telno1">
                     <b>2)</b><input type="text" name="telno2" id="telno2">
                </td>
            </tr>
            <tr>
                <td><b>Location :</b></td>
                <td><input type="text" name="location" id="location"></td>
                <td><b>PostCode :</b></td>
                <td><input type="text" name="postcode" id="postcode"></td>
            </tr>
             <tr>
                <td><b>Remarks :</b></td>
                <td><textarea name="remarks" id="remarks"></textarea></td>
            </tr>
            <tr>
                <td><b>Nature Of Case :</b></td>
                <td><input type="checkbox" name="insurance" id="insurance"><b>Insurance</b></td>
                <td><input type="checkbox" name="renovation" id="renovation"><b>Renovation</b></td>
                <td><input type="checkbox" name="tender" id="tender"><b>Tender</b></td>
                <td><input type="checkbox" name="othersofnature" id="othersofnature"><b>Others(pls specify)</b></td>
            </tr>
              <tr>
                <td><b>D.O.L :</b></td>
                <td><input type="text" name="dol" id="dol"></td>
                <td><b>Cause :</b></td>
                <td><input type="checkbox" name="fire" id="fire"><b>Fire</b></td>
                <td><input type="checkbox" name="windstorm" id="windstorm"><b>Windstorm</b></td>
                <td><input type="checkbox" name="flood" id="flood"><b>Flood</b></td>
                <td><input type="checkbox" name="othersofcause" id="othersofcause"><b>Others</b></td>
            </tr>
            <tr>
                <td><b>Sum Insured :</b></td>
                <td><input type="text" name="suminsured" id="suminsured"></td>
            </tr>
            <tr>
                <td><b>Policy Info :</b></td>
                <td><input type="text" name="poicyinfo" id="poicyinfo"></td>
            </tr>
            <tr>
                <td><b>Assign to :</b></td>
                <td><b>Marketing :</b></td>
                <td><input type="text" name="marketing" id="marketing"></td>
                <td><b>QS :</b></td>
                <td><input type="text" name="qs" id="qs"></td>
            </tr>
        </td>
            </tr> 
        </table>
        </table>
        <table align="right">
            <tr>
                <td colspan="3">
                    <input type="submit" value="Submit/Save" name="loginsubmit" id="submit"/>
                </td>
            </tr>
        </table>
    </form>

CSS

input[type="text"]{
border: 0;
border-bottom: 1px solid black;
outline: 0;}

Answer 1

input#username
{
border: 0;
border-bottom: 1px solid black;
outline: 0;
}

or

#username
{
border: 0;
border-bottom: 1px solid black;
outline: 0;
}

or

input[name=username]
{
border: 0;
border-bottom: 1px solid black;
outline: 0;
}

Answer 2

You can apply CSS on a certain input field by adding a Class or ID on that input field. But for CSS best you use CLASS. For example you've

 <input type="text" name="username" id="username" value="Asha" readonly="readonly">

As this input field has a ID, you can apply css by ID this way -

 #username{
      color:red;
      background-color:black;
 }

Or you if you give it a class, you can do it this way

 <input type="text" name="username" id="username" value="Asha" readonly="readonly" class="username">

 .username{
      color:red;
      background-color:black;
 }

Answer 3

Edit the code like this

CSS

#username {
border: 0;
border-bottom: 1px solid black;
outline: 0;}