How to make an awesome <input> tag using HTML and CSS
Tags: beginners, html, css, webdev
Published: 2022-01-06 15:45:37

```
<h1>HELLO!</h1>
```

Previous Chapter [Chapter 2 (Part 4)](https://inform-our-world.github.io/Saqha/CH%202.4)

Inform Our World [Link here](https://inform-our-world.github.io/)

[My Portfolio](https://subhransuindia.github.io/Subhransu%20Patra.html)

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

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

```
<input>
```

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

```
<input placeholder="Hello! 😎">
```

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! 😎">
```

Then a background.

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

The a `good-looking` border.

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

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! 😎">
```

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">
```

```
<!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>
```
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! 😎">
```

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>
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw16b857yuh1e4cg7yqx.jpeg)

Cheer me up if you like it! 😊