文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何防止文本在搜索图标后面显示

问如何防止文本在搜索图标后面显示
EN

Stack Overflow用户
提问于 2019-01-19 02:40:52
回答 3查看 341关注 0票数 0

为了自学，我正在尝试建立一个搜索字段，但我正在试验两个问题。

  1. 当文本是长的，它是显示在搜索图标后面。我怎么才能防止这件事？
  2. 为什么在图标和右边框之间有一个空格，即使我添加了right:0;

相关代码：

代码语言：javascript
复制
.search i{
position: absolute;    
top:50%;
right:0;
transform: translateY(-50%);
font-size: 35px;
color: dimgray;
background-color:green;
}

​

代码语言：javascript
复制
.search-container{
    display:flex;
    width:70%;
}
.search{
    width:100%;
    position:relative;
}
.search input{
    height:50px;
    padding:4px 0 4px 30px;
    font-size: 20px;
}
.search i{
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    font-size: 35px;
    color: dimgray;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <div class="search-container">
            <select class="name">
                <option value="Name-1">Name-1</option>
                <option value="Name-2">Name-2</option>
                <option value="Name-3">Name-3</option>
                <option value="Name-4">Name-4</option>
                <option value="Name-5">Name-5</option>
                <option value="Name-6">Name-6</option>
                <option value="Name-7">Name-7</option>
            </select>
            <div class="search">
                <input class="search-bar search" type="text" name="search" autofocus placeholder="You can search for a name.">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </body>
</html>

​

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-01-19 03:12:48

  1. 您可以向输入中添加一个正确的padding，并将box-sizing设置为border-box。
  2. 有一个空格，因为图标是相对于输入放在右边的而不是，而是相对于的，因为是它的第一个定位(而不是静态)祖先元素。如果你用浏览器检查它，你的图标就是这个div结束的地方。

​

​

以下是固定的片段：

​

代码语言：javascript
复制
.search-container{
    display:flex;
    width:70%;
}
.search{
    width:100%;
    position:relative;
}
.search input{
    height:50px;
    padding:4px 50px 4px 30px;
    font-size: 20px;
    box-sizing: border-box;
}
.search i{
    position: absolute;
    top:50%;
    right:10px;
    transform: translateY(-50%);
    font-size: 35px;
    color: dimgray;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <div class="search-container">
            <select class="name">
                <option value="Name-1">Name-1</option>
                <option value="Name-2">Name-2</option>
                <option value="Name-3">Name-3</option>
                <option value="Name-4">Name-4</option>
                <option value="Name-5">Name-5</option>
                <option value="Name-6">Name-6</option>
                <option value="Name-7">Name-7</option>
            </select>
            <div class="search">
                <input class="search-bar search" type="text" name="search" autofocus placeholder="You can search for a name.">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2019-01-19 03:20:05

这是您修改过的代码，我相信它可以实现您所要求的内容。我已经从搜索输入中删除了一个search类，因为父节点具有相同的类。

​

代码语言：javascript
复制
.search-container{
    display:flex;
    width:70%;
}
.search{
    width:100%;
    position:relative;
    display: flex;
    flex-direction: row;
    border: 1px solid black;
}

.search:focus-within {
  outline-width: 1px;
  outline-color: rgb(166,200,255);
  outline-style: solid;
}

.search input{
    height:50px;
    width: 90%;
    padding:4px 0 4px 30px;
    font-size: 20px;
    border: none;
    outline: none;
}

.search i{
    display: flex;
    width: 10%;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    padding: 0 .5em 0 .5em;
    color: dimgray;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <div class="search-container">
            <select class="name">
                <option value="Name-1">Name-1</option>
                <option value="Name-2">Name-2</option>
                <option value="Name-3">Name-3</option>
                <option value="Name-4">Name-4</option>
                <option value="Name-5">Name-5</option>
                <option value="Name-6">Name-6</option>
                <option value="Name-7">Name-7</option>
            </select>
            <div class="search">
                <input class="search-bar" type="text" name="search" autofocus placeholder="You can search for a name.">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2019-01-19 02:46:55

来自http://jsfiddle.net/Sadhana/2LHh9/

​

代码语言：javascript
复制
.search_box {
    background:url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
    background-size:20px 20px;
    background-repeat:no-repeat;
    background-position: right;
    padding-right: 20px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    float: left;
}
代码语言：javascript
复制
<input type="text" class="textbox search_box" name="keywords" placeholder="Search..." />

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54263652

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档