I’m just learning to write html/css and I’m trying to create a copy of the Google search page.
I’m having issues with my textbox’s border color as half is black and the other half is grey.
Why is this happening and how do I change the entire textbox’s border color to light grey?
Sorry, I’m a newbie and this might be a dumb question but I appreciate your input! Thank you in advance!
Here’s my html/css code and html page:
(https://i.sstatic.net/WiDYpb3w.png)
<!DOCTYPE html>
<html>
<head>
<style>
.logo{
margin-left: 70px;
}
.search{
width: 600px;
padding-left: 15px;
text-align: left;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 50px;
border-color: rgb(159, 159, 159);
box-shadow: 10px 5px 5px rgb(202, 202, 202);
}
</style>
</head>
<body>
<img class="logo" src="mothers-day-2024-may-12-6753651837110364-ldrk.png">
<input class="search" type="textbox" placeholder="Search Google or type a URL">
</body>
</html>
I’ve tried changing the border-color but half is always black.
2
Answers
Use
border: 1px solid red
instead of specifyingborder-color: rgb(159, 159, 159)
.By default,
input
element hasborder-style
set toinset
and what you are asking for issolid
style. To overwrite that, add a CSS rule inside selector.search
with propertyborder-style
set to valuesolid
After adding the said rule, your code will look like this: