0

изначально только лупа конечный результат

.search {
  width: 13px;
  height: 13px;
  padding: 5px;
  background: url(../../img/search.svg) no-repeat right center;
  -webkit-background-size: 13px;
  background-size: 13px;
  margin-top: -2px;
  cursor: pointer;
  outline: none;
  transition: all .3s ease-in-out;
}

.input_text {
  display: none;
  width: 150px;
  margin-right: 5px;
  outline: none;
  border-bottom: 1px solid #c2c2c0;
  transition: all .15s ease-in-out;
}

.search:hover .input_text {
  display: inline-block;
}
<form>
  <input placeholder="Search" type="search" class="input_text">
  <input type="submit" value="" class="search">
</form>


<form>
    <input placeholder="Search" type="search" class="input_text">
     <input type="submit" value="" class="search">
</form>

3
  • display: none; не меняется...
    – DNS
    7 апр 2017 в 15:56
  • а тайп хидден? может так но не уверен Сделай в цвет с фоном, а при наведении пусть раздвигается и меняет цвет как захочешь
    – Vladik
    7 апр 2017 в 15:59
  • С каких таких пор display: none; не меняется? 7 апр 2017 в 16:18

3 ответа 3

2

* {
  box-sizing: border-box;
}

body {
  padding: 25px;
}

.form-container {
  display: table;
  width: 100%;
  height: 25px;
  table-layout: fixed;
}

.form-container-item {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

form {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #ccc;
  height: 100%;
  min-width: 25px;
}

.input_text {  
  width: 0;
  height: 100%;
  margin-right: 5px;
  outline: none;
  border-bottom: 1px solid #c2c2c0;
  transition: all .15s ease-in-out;
}

form:hover .input_text {
  width: 100%;
}
form:hover .search{
  background: royalblue;
}


.search {  
  border: none;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -11.5px;
  width: 25px;
  height: 100%;
  padding: 0;
  background: #000 url(../../img/search.svg) no-repeat right center;
  -webkit-background-size: 13px;
  background-size: 13px;
  cursor: pointer;
  outline: none;
  transition: all .3s ease-in-out;
}
<div class="form-container">
  <div class="form-container-item">
    <form>
      <input placeholder="Search" type="search" class="input_text" required>
      <input type="submit" value="" class="search">
    </form>
  </div>
  <div class="form-container-item">
    <form>
      <input placeholder="Search" type="search" class="input_text" required>
      <input type="submit" value="" class="search">
    </form>
  </div>
</div>

0
1

.search {
  position: relative;
  width: 300px;
  padding-right: 20px;
}

.search_button {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: green;
  outline: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.search_input {
  display: none;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #000;
  width: 100%;
  height: 20px;
  line-height: 20px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.search_button:hover + .search_input { display: inline-block; }
<div class="search">
  <button class="search_button"></button>
  <input type="text" placeholder="Search" class="search_input">
</div>

2
  • А за что минус то?
    – Eugen Eray
    7 апр 2017 в 16:43
  • @Eugen Eray бывает, не все догадались на квадратик навестись .... xDD 7 апр 2017 в 17:10
1

Вот через JS если не смущает:

Plain JS:

var whatToHover = document.getElementById("hoverable");

function hover(){
whatToHover.onmouseover = function(){
document.getElementById("invisible").setAttribute("type","text");};

whatToHover.onmouseout = function(){
document.getElementById("invisible").setAttribute("type","hidden");};
}

window.onload = hover;
form input {width: 53%; border: 2px solid darkgreen;}
<form id="form">
<input type="hidden" value="Типа меня нет" id="invisible"/><br/>
<b id="hoverable">Погладь меня и видишь кое-то скрытое</b>
</form>

jQuery

$("#hoverable").mouseover(function(){
 $("#invisible").attr("type","text");
});

$("#hoverable").mouseout(function(){
 $("#invisible").attr("type","hidden");
});
form input {width: 53%; border: 2px solid darkgreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<form id="form">
<input type="hidden" value="Типа меня нет" id="invisible"/><br/>
<b id="hoverable">Погладь меня и видишь кое-то скрытое</b>
</form>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.