Erweiterbares CSS-Suchfeld

Ich habe ein erweiterbares CSS-Suchfeld, das funktioniert, aber ich möchte, dass die Suchelemente über die beiden vorherigen Symbole hinausgehen und sie nicht nach links schieben. Ich könnte dies erreichen, indem ich einen höheren Z-Index-Wert auf das Suchformular und einen niedrigeren Wert auf die Symbole anwende, aber leider vermisse ich etwas.Erweiterbares CSS-Suchfeld

Hier ist ein Link, um zu sehen, was ich versuche. TIA für jede Hilfe!

https://codepen.io/anon/pen/Qprjjw#anon-login

Hier ist der HTML

<h3>Search Demo</h3> 
<div class="right"> 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 

    <form id="search"> 
     <input type="search" placeholder="Search"> 
    </form> 
</div>

Hier ist die CSS

body { 
    background: #fff; 
    color: #666; 
    font: 90%/180% Arial, Helvetica, sans-serif; 
    width: 800px; 
    max-width: 96%; 
    margin: 0 auto; 
} 
.right { float: right} 
a { 
    color: #69C; 
    text-decoration: none; 
} 
a:hover { 
    color: #F60; 
} 
h1 { 
    font: 1.7em; 
    line-height: 110%; 
    color: #000; 
} 
p { 
    margin: 0 0 20px; 
} 

/* 
input { 
    outline: none; 
} 
*/ 
input[type=search] { 
    outline: none; 
    color: #4a83c0; 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
    font-family: inherit; 
    font-size: 100%; 
} 
input::-webkit-search-decoration, 
input::-webkit-search-cancel-button { 
    display: none; 
} 

input[type=search] { 
    background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
    border: solid 1px #ccc; 
    padding: 9px 10px 9px 32px; 
    width: 55px; 

    -webkit-border-radius: 10em; 
    -moz-border-radius: 10em; 
    border-radius: 10em; 

    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 
input[type=search]:focus { 
    width: 130px; 
    background-color: #fff; 
    border-color: #66CC75; 

    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
} 


input:-moz-placeholder { 
    color: #4a83c0; 
} 
input::-webkit-input-placeholder { 
    color: #4a83c0; 
} 

/* Demo */ 
#search { display:inline-block;} 
#search input[type=search] { 
    width: 15px; 
    padding-left: 10px; 
    color: transparent; 
    cursor: pointer; 
} 
#search input[type=search]:hover { 
    background-color: #fff; 
} 
#search input[type=search]:focus { 
    width: 600px; 
    padding-left: 32px; 
    color: #4a83c0; 
    background-color: #fff; 
    cursor: auto; 
} 
#search input:-moz-placeholder { 
    color: transparent; 
} 
#search input::-webkit-input-placeholder { 
    color: transparent; 
}

Quelle

2017-03-22 soire

Sie können die Bilder mit position: absolute; in Bezug auf die div mit der Klasse right positionieren.

Sie müssen z-index of -1 auf den Bildern festlegen, damit das Formular sie abdeckt.

codepen

body { 
 
    background: #fff; 
 
    color: #666; 
 
    font: 90%/180% Arial, Helvetica, sans-serif; 
 
    width: 800px; 
 
    max-width: 96%; 
 
    margin: 0 auto; 
 
} 
 

 
.right { 
 
    float: right 
 
} 
 

 
a { 
 
    color: #69C; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #F60; 
 
} 
 

 
h1 { 
 
    font: 1.7em; 
 
    line-height: 110%; 
 
    color: #000; 
 
} 
 

 
p { 
 
    margin: 0 0 20px; 
 
} 
 

 

 
/* 
 
input { 
 
\t outline: none; 
 
} 
 
*/ 
 

 
input[type=search] { 
 
    outline: none; 
 
    color: #4a83c0; 
 
    -webkit-appearance: textfield; 
 
    -webkit-box-sizing: content-box; 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
} 
 

 
input::-webkit-search-decoration, 
 
input::-webkit-search-cancel-button { 
 
    display: none; 
 
} 
 

 
input[type=search] { 
 
    background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
 
    border: solid 1px #ccc; 
 
    padding: 9px 10px 9px 32px; 
 
    width: 55px; 
 
    -webkit-border-radius: 10em; 
 
    -moz-border-radius: 10em; 
 
    border-radius: 10em; 
 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 

 
input[type=search]:focus { 
 
    width: 130px; 
 
    background-color: #fff; 
 
    border-color: #66CC75; 
 
    -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
    -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
    box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
} 
 

 
input:-moz-placeholder { 
 
    color: #4a83c0; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    color: #4a83c0; 
 
} 
 

 

 
/* Demo 2 */ 
 

 
#search { 
 
    display: inline-block; 
 
} 
 

 

 
/* new css */ 
 

 
.right { 
 
    position: relative; 
 
} 
 

 
.right img { 
 
    position: absolute; 
 
    top: 8px; 
 
    z-index: -1; 
 
} 
 

 

 
/* change these values to move the images to where you need */ 
 

 
.right img:nth-of-type(1) { 
 
    right: 40px; 
 
} 
 

 
.right img:nth-of-type(2) { 
 
    right: 60px; 
 
} 
 

 
#search input[type=search] { 
 
    width: 15px; 
 
    padding-left: 10px; 
 
    color: transparent; 
 
    cursor: pointer; 
 
    z-index: 5; 
 
} 
 

 
#search input[type=search]:hover { 
 
    background-color: #fff; 
 
} 
 

 
#search input[type=search]:focus { 
 
    width: 600px; 
 
    padding-left: 32px; 
 
    color: #4a83c0; 
 
    background-color: #fff; 
 
    cursor: auto; 
 
} 
 

 
#search input:-moz-placeholder { 
 
    color: transparent; 
 
} 
 

 
#search input::-webkit-input-placeholder { 
 
    color: transparent; 
 
}

<h3>Demo 2</h3> 
 
<div class="right"> 
 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 
 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 
 

 
    <form id="search"> 
 
    <input type="search" placeholder="Search"> 
 
    </form> 
 
</div>

Quelle

2017-03-22 17:12:07 sol

Machen Sie Ihre erweiterbare Suchleiste position: absolute;, es ist Mutter position: relative; (so erweiterbar Bar bleibt in ihm). Dann können Sie Bilder beispielsweise mit einem Padding positionieren.

body { 
 
    background: #fff; 
 
    color: #666; 
 
    font: 90%/180% Arial, Helvetica, sans-serif; 
 
    width: 800px; 
 
    max-width: 96%; 
 
    margin: 0 auto; 
 
} 
 

 
/* START OF CHANGE */ 
 
.search-container { 
 
    position: relative; 
 
    padding-right: 40px; 
 
} 
 

 
#search input[type=search] { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
/* END OF CHANGE */ 
 

 
.right { 
 
    float: right 
 
} 
 

 
a { 
 
    color: #69C; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #F60; 
 
} 
 

 
h1 { 
 
    font: 1.7em; 
 
    line-height: 110%; 
 
    color: #000; 
 
} 
 

 
p { 
 
    margin: 0 0 20px; 
 
} 
 

 
/* 
 
input { 
 
\t outline: none; 
 
} 
 
*/ 
 

 
input[type=search] { 
 
    outline: none; 
 
    color: #4a83c0; 
 
    -webkit-appearance: textfield; 
 
    -webkit-box-sizing: content-box; 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
} 
 

 
input::-webkit-search-decoration, 
 
input::-webkit-search-cancel-button { 
 
    display: none; 
 
} 
 

 
input[type=search] { 
 
    background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
 
    border: solid 1px #ccc; 
 
    padding: 9px 10px 9px 32px; 
 
    width: 55px; 
 
    -webkit-border-radius: 10em; 
 
    -moz-border-radius: 10em; 
 
    border-radius: 10em; 
 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 

 
input[type=search]:focus { 
 
    width: 130px; 
 
    background-color: #fff; 
 
    border-color: #66CC75; 
 
    -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
    -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
    box-shadow: 0 0 5px rgba(109, 207, 246, .5); 
 
} 
 

 
input:-moz-placeholder { 
 
    color: #4a83c0; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    color: #4a83c0; 
 
} 
 

 
/* Demo 2 */ 
 

 
#search { 
 
    display: inline-block; 
 
} 
 

 
#search input[type=search] { 
 
    width: 15px; 
 
    padding-left: 10px; 
 
    color: transparent; 
 
    cursor: pointer; 
 
} 
 

 
#search input[type=search]:hover { 
 
    background-color: #fff; 
 
} 
 

 
#search input[type=search]:focus { 
 
    width: 600px; 
 
    padding-left: 32px; 
 
    color: #4a83c0; 
 
    background-color: #fff; 
 
    cursor: auto; 
 
} 
 

 
#search input:-moz-placeholder { 
 
    color: transparent; 
 
} 
 

 
#search input::-webkit-input-placeholder { 
 
    color: transparent; 
 
}

<h3>Demo 2</h3> 
 
<div class="right search-container"> 
 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 
 
    <img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" /> 
 

 
    <form id="search"> 
 
    <input type="search" placeholder="Search"> 
 
    </form> 
 
</div>

Quelle

2017-03-22 17:21:20 Linek

ich Ihr Problem mit Javascript zwei Funktionen gelöst.

für andere Bilder nicht überschrieben, geben Sie ID zu Bildern, die Sie versteckt werden möchten.

Der Algorithmus ändert nur die Größe dieser beiden Bilder.
Zwei Funktionen werden benötigt, eine, wenn der Benutzer auf das Eingabefeld klickt.
- In Javascript ist onClick, um eine Funktion aufzurufen.
Sekunde, wenn der Benutzer das Eingabefeld verlässt.
In JavaScript ist es onBlur jede Funktion aufzurufen

gehen auf und fügen Sie diese beiden Funktionen auf Ihrem Javascript Abschnitt

// this will set the size of the images to 0px 
function setImageWidthZero() { 
document.getElementById("img1").style.width='0%'; 
document.getElementById("img2").style.width='0%'; 
    } 

// This will set the width to their default widths 
function setImageWidthDefault() { 
    document.getElementById("img1").style.width=''; 
    document.getElementById("img2").style.width='';

}

nicht vergessen ids, um Bilder zu geben, .

Im Eingabefeld müssen Sie sowohl onblur als auch onClick Methoden verwenden.

<input type="search" placeholder="Search" onfocus='setImageWidthZero()' 
onblur='setImageWidthDefault()'>

Der gesamte Code, den Sie kopieren geht so:

HTML Teil

<h3>Demo 2</h3> 
<div class="right"> 
<img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" 
alt="" width="" height="" border="" align="" id='img1'/> 

<img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" 
alt="" width="" height="" border="" align="" id='img2'/> 

<form id="search"> 
<input type="search" placeholder="Search" onfocus='setImageWidthZero()' 
onblur='setImageWidthDefault()'> 
</form> 
</div>

Die CSS-Teil, Sie müssen dort nichts hinzuzufügen, können Sie es aus der kopieren Website gab Sie den Link.

Falls irgendein Problem, lassen Sie mich bitte wissen. Viel Spaß beim Codieren.

Quelle

2017-03-22 18:21:12

Vielen Dank für Ihre Antwort. Die Bilder, die ich tatsächlich in meinem Code verwende, haben jedoch unterschiedliche dynamische Breiten. Das sind eigentlich Anker-Tags mit Hintergrundbildern, die keine Pixelwerte für ihre Breite haben (basierend auf Text). Ist das sinnvoll? – soire

Jedes Bild hat Pixelwerte für seine Breite, auch wenn es im Hintergrund irgendeines Elements in HTML verwendet wird, soweit es mich betrifft. Falls es nicht funktioniert, versuchen Sie, die Breite des verwendeten Anker-Tags zu ändern. Das Bild im Hintergrund kann sich entsprechend ändern. –

Erweiterbares CSS-Suchfeld

Antwort

Verwandte Themen