Html Question posted in
Some basic documentation can be found here.

HTML/CSS: Issue with textbox border color

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.

Tags:

2

Answers


  1. 0

    Use border: 1px solid red instead of specifying border-color: rgb(159, 159, 159).

          .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: 1px solid red;
        box-shadow: 10px 5px 5px rgb(202, 202, 202);
      }
      <img class="logo" src="mothers-day-2024-may-12-6753651837110364-ldrk.png">
  <input class="search" type="textbox" placeholder="Search Google or type a URL">
    Login or Signup to reply.
  2. 0

    By default, input element has border-style set to inset and what you are asking for is solid style. To overwrite that, add a CSS rule inside selector .search with property border-style set to value solid

    After adding the said rule, your code will look like this:

    <!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);
        border-style: solid; /* added rule */
      }
    </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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search