<h1>HELLO!</h1>
Previous Chapter Chapter 2 (Part 4)
Inform Our World Link here
<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 <input> 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 <input> 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 <input> 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! 😊
Top comments (4)
Good
Thanks
Yeah that is the good way
Thanks for your Review and also for your suggestions... 😃