CODEWITHSUNDEEP
htmlcss
pcs
pcs

Reputation: 1854

search box click location not properly in css

I created search box using codepen,

Here is code:

.search-box {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 127px;
  width: 53px;
  display: inline-block;
  color: red;
  float: right;
  background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  cursor: pointer;
  cursor: pointer;
  transition: opacity .4s ease;
}
input[type="submit"]:hover {
  opacity: 0.8;
}
<div id="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?">
    <input id="search_submit" value="" type="submit">
  </form>
</div>

Here is DEMO

When i click on the icon, it doesn't work properly.. somewhere click on the icon, it works.

May i know, how to fix it?

Thanks,

Upvotes: 1

Views: 110

Answers (4)

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

To work proper i think. You should use jquery too.

find demo here

$('#search_submit, .search-box').focus(function(){
  $('.search-box').addClass('search-width');
});
$('#search_submit, .search-box').blur(function(){
  $('.search-box').removeClass('search-width');
});

Upvotes: 0

Nitekurs
Nitekurs

Reputation: 451

Try this

form {
    position: relative;
}

input[type="submit"] {
    z-index:9;
}

Upvotes: 0

Mo.
Mo.

Reputation: 27465

You have plenty of options to implement this function. Have you tried button height to height:74px ?

.search-box {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 74px;
  width: 53px;
  display: inline-block;
  color: red;
  float: right;
  background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  cursor: pinter;
  cursor: pointer;
  transition: opacity .4s ease;
}
input[type="submit"]:hover {
  opacity: 0.8;
}
<div id="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?">
    <input id="search_submit" value="" type="submit">
  </form>
</div>

It seems to work for me on FF enter image description here

Upvotes: 1

vas
vas

Reputation: 960

Add this css 

.search-box{top:28px}

if not try this 

input[type="submit"] {height: 68px;}

Upvotes: 0

Related Questions