Question

我有一个jsp页面。它包含no.of输入字段。我为我的jsp页面添加了Css。现在问题是，当我使用下面附带的CSS时，它正在申请所有输入字段。我只想将它应用于UserName字段。

JSP页面

<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;
}

或

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

或

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

Answer 2

您可以通过在input字段上添加类或ID，在某个input字段上应用CSS。但对于CSS最好使用CLASS。例如，您已经

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

由于此输入字段具有ID，因此您可以通过ID以这种方式应用css -

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

或者如果你给它上课，你可以这样做

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

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

Answer 3

像这样编辑代码

CSS

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

仅将CSS应用于一个输入字段

3 个答案: