Reputation: 115
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;}
Upvotes: 2
Views: 4313
Reputation:
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;
}
Upvotes: 5
Reputation: 2223
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;
}
Upvotes: 1
Reputation: 4749
Edit the code like this
CSS
#username {
border: 0;
border-bottom: 1px solid black;
outline: 0;}
Upvotes: 0