HTML/CSS：文本框边框颜色问题

问题描述 投票：0回答：3

我刚刚学习编写 html/css，并且正在尝试创建 Google 搜索页面的副本。

我的文本框边框颜色有问题，因为一半是黑色，另一半是灰色。

为什么会发生这种情况？如何将整个文本框的边框颜色更改为浅灰色？

抱歉，我是新手，这可能是一个愚蠢的问题，但我感谢您的意见！预先感谢您！

这是我的 html/css 代码和 html 页面： (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>

我尝试过更改边框颜色，但一半始终是黑色。

html css
3个回答
0
投票

使用 

border: 1px solid red
而不是指定 
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">

0
投票

添加这个简写属性就可以正常工作了

border: 1px solid rgb(159, 159, 159)
.

您可以阅读更多内容并学习：https://www.w3schools.com/css/css_border_shorthand.asp

0
投票

默认情况下，

input
元素将
border-style
设置为
inset
，而您要求的是
solid
样式。要覆盖它，请在选择器 
.search
内添加一条 CSS 规则，并将属性 
border-style
设置为值 
solid

添加上述规则后，您的代码将如下所示：

<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.