DEV Community

Cover image for How to make an awesome <input> tag using HTML and CSS
Subhransu Patra
Subhransu Patra

Posted on

How to make an awesome <input> tag using HTML and CSS

<h1>HELLO!</h1>
Enter fullscreen mode Exit fullscreen mode

Previous Chapter Chapter 2 (Part 4)

Inform Our World Link here

My Portfolio

<input> tag, by default has a white background and a border. Looks decent, na? But sometimes, for me, it looks boring enough, for some reason that I don't know. But, for that instance I thought to edit this 'outdated' (I mustn't say it...) thing. Here I will share that code with you. Enjoy the article πŸ™ƒ.

I have poem to share,

Design comes from your mind
It is a thing that someone could find
With it creativity is just 'yeah'
Someone said,
Without art, Earth is just 'eh'

Now, let's start the article,

First create an HTML file...

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then add <input> tag under <body> tag.

<input>
Enter fullscreen mode Exit fullscreen mode

Add placeholder="" attribute in <input> tag to add a text in <input>

<input placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

Default HTML <input> tag is ready. But it isn't looking sober. So we have to edit this...

First add some padding,

<input style="padding: 10px;" placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

Then a background.

<input style="padding: 10px;background-color: rgba(225, 225, 255);" placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

The a good-looking border.

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);" placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

Border Radius; a must.

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

Then Change the font...

I used Poppins font from google as it is my favorite font.

So, to add google font, we must add this link to head tag.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then add this font to <input>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">
Enter fullscreen mode Exit fullscreen mode

And Now it is done!!!!!!!!

Full Code...

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

It is not as good but looking good enough than the default one πŸ˜‚.

I think I should develop a whatsapp web clone but not sure about it. If you think it is a good idea then notify me through comment or like the post...

I will meet you in the next post, till then bye bye πŸ˜‰.

A sneak peek to my new website design.

Sneak Peek

Cheer me up if you like it! 😊

Top comments (4)

Collapse
 
sumanta_thefrontdev profile image
SumantaWeb

Good

Collapse
 
subhransuindia profile image
Subhransu Patra

Thanks

Collapse
 
sumanta_thefrontdev profile image
SumantaWeb

Yeah that is the good way

Collapse
 
subhransuindia profile image
Subhransu Patra

Thanks for your Review and also for your suggestions... πŸ˜ƒ