Text Inputs in HTML -Khabork

There are so many input type attributes in the HTML,among them the "text" type attribute is used so much.Any kind of user data inputs the the text type inputs are used. The Sign Up, Log In form also the other inputs like any kind of user data inputs the text type attributes are used. So the normal input type attributes looks not attractive, for this the we make our own style in the text attribute.

Now we apply the css in the text input.

Examples:-

1) Normal Input

html:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<input type="text" placeholder="type here..">
</body>

</html>

Out Put :

2) Input type proper CSS

In this type input we add the proper css for making the input type attribute looking good. In this type input we give the background color and the border in the outline.We also give the border radius
in the corners.
html:
<input type="text" placeholder="type here..">

CSS:

input
{
width: 300px;
height: 50px;
font-size: 30px;
border-radius: 5px;
border: 3px solid green;
font-family: Arial Black;

}
Out Put:

3) On Focus change background

This type of input when the mouse focus on the input type text then the color of background will change. This type of CSS we use the on active tag. The background color you can use as you like.

html:
<input type="text" placeholder="type here..">

CSS:
input{
width: 350px;
height: 50px;
font-size: 30px;
border-radius: 8px;
border: 3px solid orange;
font-family: Arial Black;
background-color: rgb(156, 156, 156);
}
input:focus
{
background-color: rgb(19, 7, 242);
color: white;

}

Out Put:

4) Shadow of the input type text

This type of input have the shadow in the right side, we can make the shadow in the left. The text Inputs in HTML also have the shadow.There also have the border radius and the solid border.

html :
<input type="text" placeholder="type here..">

CSS:
input{
width: 350px;
height: 50px;
font-size: 30px;
border-radius: 8px;
border: 1px solid black;
font-family:  Arial Black;
text-shadow: 1px 2px 2px black;
box-shadow: 4px 4px 8px black;

}
Out Put :

5) Only top border Input

This type of input only have the upper border ,there have no bottom ,left and right border. This text Inputs in HTML looking so cool.In this input there have no border radius.

html:
<input type="text" placeholder="type here..">

CSS:

input{
width: 350px;
height: 50px;
font-size: 20px;
border-width: 5px 0 0 ;
border-color: rgb(224, 0, 168);
font-family: Arial Black;

}

Out Put:

6) Only Bottom border Input

This type of input there only have bottom border, there is no left, right and top border. This type of input is looking so cool. This type of text Inputs in HTML use many website.

html:
<input type="text" placeholder="type here..">

CSS:
input{
width: 350px;
height: 50px;
font-size: 20px;
border-width: 0 0 5px ;
  border-color: rgb(224, 0, 168);
font-family: Arial Black;

}

Out Put:

Those are the most use able input type text in html. There are also so may input type css ,what ever you want , create your own type of style in the html page.

You also may like :-