title: Apply CSS to only one input field
body: <p>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.</p>
  
  <p>JSP Page</p>
  
  <pre><code>&lt;form method="post" action="./DataCaptureServlet" autocomplete="OFF"&gt;
          &lt;table id="table1" align="center"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Data Capturing Screen&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br&gt;
          &lt;table id="finalTable" align="center"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
          &lt;table id="table2"&gt;
              &lt;tr&gt;
                  &lt;td style="padding-left: 635px"&gt;&lt;b&gt;User Name&lt;/b&gt;&lt;td&gt;
                  &lt;td&gt;&lt;b&gt;:&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="username" id="username" value="Asha" readonly="readonly"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;table align="center" id="table3"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Date Of Capture :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="dateofcapture" id="dateofcapture"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;Time Capture :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="timecapture" id="timecapture"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Adjuster Co :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="adjusterco" id="adjusterco"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;Adjuster Name :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="adjustername" id="adjustername"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
          &lt;table align="center" id="table4"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Owner Name :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="ownername" id="ownername"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;Tel:1)&lt;/b&gt;&lt;input type="text" name="telno1" id="telno1"&gt;
                       &lt;b&gt;2)&lt;/b&gt;&lt;input type="text" name="telno2" id="telno2"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Location :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="location" id="location"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;PostCode :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="postcode" id="postcode"&gt;&lt;/td&gt;
              &lt;/tr&gt;
               &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Remarks :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;textarea name="remarks" id="remarks"&gt;&lt;/textarea&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Nature Of Case :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="insurance" id="insurance"&gt;&lt;b&gt;Insurance&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="renovation" id="renovation"&gt;&lt;b&gt;Renovation&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="tender" id="tender"&gt;&lt;b&gt;Tender&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="othersofnature" id="othersofnature"&gt;&lt;b&gt;Others(pls specify)&lt;/b&gt;&lt;/td&gt;
              &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;D.O.L :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="dol" id="dol"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;Cause :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="fire" id="fire"&gt;&lt;b&gt;Fire&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="windstorm" id="windstorm"&gt;&lt;b&gt;Windstorm&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="flood" id="flood"&gt;&lt;b&gt;Flood&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="checkbox" name="othersofcause" id="othersofcause"&gt;&lt;b&gt;Others&lt;/b&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Sum Insured :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="suminsured" id="suminsured"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Policy Info :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="poicyinfo" id="poicyinfo"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Assign to :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;Marketing :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="marketing" id="marketing"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;b&gt;QS :&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="qs" id="qs"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/td&gt;
              &lt;/tr&gt; 
          &lt;/table&gt;
          &lt;/table&gt;
          &lt;table align="right"&gt;
              &lt;tr&gt;
                  &lt;td colspan="3"&gt;
                      &lt;input type="submit" value="Submit/Save" name="loginsubmit" id="submit"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input[type="text"]{
  border: 0;
  border-bottom: 1px solid black;
  outline: 0;}
  </code></pre>