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

#beginners #html #css #webdev

<h1>HELLO!</h1>

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>

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.

Cheer me up if you like it! 😊

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post →