Zum Selbststudium versuche ich, Suchfelder zu erstellen, experimentiere aber mit zwei Problemen.

1. Wenn der Text zu lang ist, wird er hinter dem Suchsymbol angezeigt. Wie verhindere ich das?

2. Warum gibt es ein Leerzeichen zwischen dem Symbol und dem rechten Rand, obwohl ich right:0; hinzugefügt habe?

Relativer CODE:

.search i{
position: absolute;    
top:50%;
right:0;
transform: translateY(-50%);
font-size: 35px;
color: dimgray;
background-color:green;
}
.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;
}
<!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>
0
Simple 19 Jän. 2019 im 05:40

3 Antworten

Beste Antwort
  1. Sie können Ihrer Eingabe ein Recht padding hinzufügen und box-sizing auf border-box setzen.

  2. Es gibt ein Leerzeichen, da das Symbol nicht rechts relativ zur Eingabe platziert ist, sondern relativ zum <div class="search"> , weil es die erste Position ist (nicht statisches) Vorfahrenelement . Und wenn Sie es mit Ihrem Browser überprüfen, endet Ihr div auf Ihrem Symbol.

enter image description here

Hier ist das feste Snippet:

.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;
}
<!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
Maarti 19 Jän. 2019 im 03:20

Hier ist Ihr modifizierter Code, von dem ich glaube, dass er das erreicht, wonach Sie fragen. Ich habe eine search Klasse aus Ihrer Sucheingabe entfernt, da der übergeordnete Knoten dieselbe Klasse hat.

.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;
}
<!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
classicalConditioning 19 Jän. 2019 im 03:20

Von http://jsfiddle.net/Sadhana/2LHh9/:

.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;
}
<input type="text" class="textbox search_box" name="keywords" placeholder="Search..." />
0
Bob 19 Jän. 2019 im 02:46