7 pure CSS3 search box UI design effects

Brief Tutorial

This is a search box UI design effect made using CSS3. The design code of these search boxes is simple, the design style is mainly flat style, and the effect is fashionable and generous.

Usage

HTML structure

The HTML structure of all search boxes is to place an input and a submit button in a form.

<form>
  <input type="text" placeholder="搜索从这里开始...">
  <button type="submit"></button>
</form>

CSS Style

The CSS code of various search boxes is very simple, such as the search box with the first effect, which can be completed through simple positioning .

.d1 {background: #A3D0C3;}
.d1 input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}
.d1 button {
  position: absolute; 
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

Please refer to the download file for the implementation code of the search box with various other effects.

The above are the content of 7 pure CSS3 search box UI design effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!