2

I've got an CSS expandable search field operating, but what I want is for the search items to go over the preceding two icons, not push them to the left. I though I could accomplish this by applying a higher z-index value to the search form and a lower value to the icons, but alas, I'm missing something.

Here is a link to see what I'm trying. TIA for any help!

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

Here is the 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>

Here is the 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;
}
soire
  • 21
  • 1

3 Answers3

0

You could position the images with position: absolute; relative to the div with class right.

You will need to set a z-index of -1 on the images to make the form cover them.

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 {
 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>
sol
  • 22,311
  • 6
  • 42
  • 59
0

Make your expandable search bar position: absolute;, it's parent position: relative; (so expandable bar stays within it). Then you can position images with padding for example.

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 {
 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>
Linek
  • 1,353
  • 10
  • 20
0

I solved your problem with Javascript two functions .

for not overridden other images , give id to images you want to be hided.

  • the Algorithm is only changing the size of those two images .
  • Two functions are needed , one when user clicks on the input field .
    • In javascript it is onClick to invoke any function.
  • second , when user exits from input field .
  • In javascript it is onBlur to invoke any function

go on and add these two functions on your javascript section

 // 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='';

}

don't forget to give ids to images .

in input field you will need to use both onblur and onClick methods . 

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

The whole code you may copy goes like this :

HTML Part

<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>

The CSS Part , You do not need to add anything there , you can copy it from the website you gave the link.

In case any Problem , Please let me know . Enjoy coding .

Niamatullah Bakhshi
  • 1,445
  • 16
  • 27
  • 1
    Thank you for your reply. However, the images that I'm actually using in my code will have different, dynamic widths. The are actually anchor tags with background images that do not have pixel values for their width (based on text). Does that make sense? – soire Mar 23 '17 at 19:04
  • every image has pixel values for its width even if it is used in the background of any element in HTML as far as I am concerned . in case it didn't work , try changing the width of the anchor tag you have used , the image in the background may change accordingly . – Niamatullah Bakhshi Mar 23 '17 at 19:14