晴空的code 2022-06-10 20:35 采纳率: 75%
浏览 27
已结题

初次用HTML#CSS写搜索框遇到的问题

img


初次写搜索框,当点击搜索框时,搜索颜色就变成了黑色,这是为什么?该如何解决?

img


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="HTML">
    <meta name="author" content="唐增友">
    <title>搜索框</title>
    <style>
        .father {
            background-color:RGB(255, 255, 255);
            width:533px;
            height:45px;
            border-radius:34px;
            border-style: solid;
            border-color:olivedrab;
        }
        input {
            width:406px;
            height: 23px;
            margin: 8px 8px 8px 21px;
            border:0;
            color:darkgray;
        }
        button,i {
            background-color:white;
            border:none;
            font-family:"宋体",serif;
            font-size:16px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="father">
        <input type="text" value="搜索内容">
        <button><i>百度一下</i></button>
    </div>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-06-10 22:54
    关注

    这是input的默认css,被聚焦之后添加了一层边框outline
    可以设置input { outline: none; }

    <!DOCTYPE html>
    
    <html>
      <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style>
          input {
            outline: none;
          }
        </style>
      </head>
      <body>
        <input type="text" />
      </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月19日
  • 已采纳回答 6月11日
  • 创建了问题 6月10日

悬赏问题

  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面
  • ¥15 angular开发过程中,想要读取模型文件,即图1的335行,会报404错误(如图2)。但我的springboot里配置了静态资源文件,如图3。且在该地址下我有模型文件如图4,请问该问题该如何解决呢?
  • ¥15 itunes恢复数据最后一步发生错误
  • ¥15 关于#windows#的问题:2024年5月15日的win11更新后资源管理器没有地址栏了顶部的地址栏和文件搜索都消失了
  • ¥100 H5网页如何调用微信扫一扫功能?
  • ¥15 讲解电路图,付费求解
  • ¥15 有偿请教计算电磁学的问题涉及到空间中时域UTD和FDTD算法结合的
  • ¥15 vite打包后,页面出现h.createElement is not a function,但本地运行正常
  • ¥15 Java,消息推送配置