Make Text Field Custom With CSS

Here we learn about PHP tutorials,
and we will learn about the Text Field, to be able to modify the text field in html or php from the standard for the better with the help of css style.

With CSS we can set the size of the text field such as width and length, and color of the text field and the size of the fonts that are contained in the text field.

Take a look at the default standard html text field below, in the form of a login form.

Code:

<table width="300" border="0" align="center">

  <tr>
    <td width="111">Username</td>
    <td width="173">:
      <input type="text" name="textfield" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td>:
      <input type="text" name="textfield2" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Login" /></td>
  </tr>
</table>

 To change the look of it, make a css style in your html code below.

Code:

<link rel="stylesheet" href="style.css" type="text/css" />

Then create a new file style.css
With its css coding as below.

Code:

.textform{
heigh: 30px;
border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   }

Then change the code section above was, by just simply add class = "textform"

Code:
class = "textform"


Then the result will be like this.

Code:

<table width="300" border="0" align="center">
  <tr>
    <td width="111">Username</td>
    <td width="173">:
      <input type="text" name="textfield" class="textform" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td>:
      <input type="text" name="textfield2" class="textform" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Login" /></td>
  </tr>
</table>