22 Aug 2015

A simple example of how to style FORM ELEMENTS using just HTML and CSS

First create HTML file as given here:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/primary.css">
    </head>
   <body>
        <p>Enter some text here...</p>
        <input type="text" name="varName">
        <br>
        <p>This is TextArea...</p>
        <textarea cols="15" rows="5"></textarea>
        <br>
        <input type="submit">       
    </body>
</html>

Create CSS file as given here:

body{
    font-family: Arial,sans-serif;
    font-size: 0.8em;
}
input[type="text"]{
    width: 300px;
    padding: 3px;
    color: slategray;
    border: 1px solid #000;
}

textarea{
    border: 1px dotted #000;
}

input[type="submit"]{
    padding: 5px;
    border: 2px solid #000;
    border-radius: 3px;
}

Share:

0 comments:

Post a Comment