Menu
I am trying to move the user input further to the right because the border intercepts with the text and doesn't make it look neat. I was trying to make it so there would be a whitespace before the text but I couldn't make it work. So if anyone knows how to fix this I would really appreciate it. Image Here:
Entire Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Welcome!
</title>
</head>
<style>
html {
background-color: cadetblue;
font-family: Blippo, fantasy;
}
.welcomes {
font-size: 80px;
font-weight: 900;
margin-top: 10%;
color: white;
}
.name {
width: 38%;
margin-left: 32%;
height: 30px;
border-radius: 25px;
border-color: white;
outline: none;
caret-color: cadetblue;
}
</style>
<body>
<div class="welcomes">
<center>
Welcome!
</center>
</div>
<br>
<br>
<input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px;" placeholder=" Please Enter Your Name To Continue!">
</body>
</html>
362
asked Jul 09 '26 22:07
Use padding-left for the input tag.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Welcome!
</title>
</head>
<style>
html {
background-color: cadetblue;
font-family: Blippo, fantasy;
}
.welcomes {
font-size: 80px;
font-weight: 900;
margin-top: 10%;
color: white;
}
.name {
width: 38%;
margin-left: 32%;
height: 30px;
border-radius: 25px;
border-color: white;
outline: none;
caret-color: cadetblue;
}
</style>
<body>
<div class="welcomes">
<center>
Welcome!
</center>
</div>
<br>
<br>
<input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px; padding-left: 20px;" placeholder=" Please Enter Your Name To Continue!">
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
