JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search</title>
</head>
<body>
<input type="text" placeholder="Введите текст для поиска"> <input type="submit" value="Искать"> 
</body>
</html>

CSS

input[type="text"] {
  border: 1px inset #cdcdd1;
  width: 200px;
}

input[type="text"]:focus::-webkit-input-placeholder {color: transparent}
input[type="text"]:focus::-moz-placeholder          {color: transparent}
input[type="text"]:focus:-moz-placeholder           {color: transparent}
input[type="text"]:focus:-ms-input-placeholder      {color: transparent}

input[type="text"]:focus {
  color: red;
  box-shadow: 0 0 5px 3px #799fcb;
  border-color: transparent;
  background:url(http://s1.iconbird.com/ico/2013/10/464/w512h5121380984608delete.png) 185px 50% no-repeat;
  background-size: 10px;
}