Skip to main content

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.
Text Inputs in HTML

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 :-

i) How add CSS in Buttons in HTML









Labels:

Comments

Post a Comment

Comment Here

Popular posts from this blog

Indian Food Culture -Khabork

Indian food culture Indian food culture  is the best in the world. Northern Indian food primarily includes items which are surge Linked like Tandoori roti ,garandma, Kulcha, etc. South Asian matter primary includes items which are created of cereal solid like Idli, Sambar vada, Upma ,Dosa etc. Indian Food Indian food corporation In India  other kinds of food like  North Indian food ,  South Indian Food  etc. North Indian Food primarily includes items are sugar linked like Tandoori roti grandma,kulcha etc. East Indian food provides the sweet dish like rashogolla, sandesh etc. South Indian matter primarily includes items which are created of cereal solid like Idli,sambar,vada,dosa,ctc. Chili is most important for every Indian.     I ndian food, street In Indian food Culture the most reliable cuisine of India is the India neighborhood food, which will be purchased just for same rupees portable kiosks seen in the Indian cities and town. These street vendors provide wa
6 comments
Read more

What is Corona Virus ? Novel Coronavirus (2019-nCoV) -Khabork

What is Corona Virus ?          Coronaviruses are   an outsized  family of viruses found in both animals and humans. Some infect people and are known to cause illness  starting from  the  cold  to more severe diseases  like  Middle East  Respiratory Syndrome (MERS) and Severe Acute Respiratory Syndrome (SARS). What is "Novel" Coronavirus (2019-nCoV) ? A novel coronavirus (CoV) may be a new strain of coronavirus that has not been previously identified in humans. The "novel" is defined as 2019-nCoV  ,it is not seen before the out break was reported in December 2019 in Wuhan city in China. How Dangerous on It ?? As with other respiratory illnesses, infection with 2019-nCoV can cause mild symptoms including a runny nose, pharyngitis , cough, and fever. It is not only one symptoms by the Corona Virus can be   fever , cough,  pharyngitis and  runny nose  .   It are often more severe for a few persons and may cause pneumonia or breathing difficulties.
3 comments
Read more

Valentines Day Images💕 -Khabork

💕 Valentines Day 💕 It's also called  Saint Valentine's Day  or the  Feast of Saint Valentine. Originating as a Western Christian fete day honoring one or two early saints named Valentin's, Valentine Day is recognized as a big cultural, religious, and commercial celebration of romance and romantic love in many regions round the world.The day first became related to romantic love within the circle of Chaucer within the 14th century, when the tradition of code of conduct flourished. happy valentine day 💕 Who is Your Valentines ? love is within the air! are you able to feel it? Every Valentine Day , Valentine Day rolls around and that we find ourselves trapped within the excitement of candy, flowers, cards and hearts of red, white and pink. So who is your valentine this year? If you are like most youngsters , you almost certainly have many them. Parents, sisters and brothers, aunts and uncles, neighbors, teachers and every one kinds of friends at college — th
Post a Comment
Read more