- <div class="flexbox">
- <div class="search">
- <h1>Search this site</h1>
- <h3>Click on search icon, then type your keyword.</h3>
- <div>
- <input type="text" placeholder=" Search . . ." required>
- </div>
- </div>
- </div>
- .flexbox {
- background: linear-gradient(155deg, #37d, #59f, #7bf);
- font-family: Roboto, sans-serif;
- width: 600px;
- height:240px;
- margin:20px auto;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .search {
- margin: 20px;
- }
- .search > h3 {
- font-weight: normal;
- }
- .search > h1,
- .search > h3 {
- color: white;
- margin-bottom: 15px;
- text-shadow: 0 1px #0091c2;
- }
- .search > div {
- display: inline-block;
- position: relative;
- }
- .search > div:after {
- content: "";
- background: white;
- width: 4px;
- height: 20px;
- position: absolute;
- top: 40px;
- right: 2px;
- transform: rotate(135deg);
- box-shadow: 1px 0 #0091c2;
- }
- .search > div > input {
- color: white;
- font-size: 16px;
- background: transparent;
- width: 25px;
- height: 25px;
- padding: 10px;
- border: solid 3px white;
- outline: none;
- border-radius: 35px;
- box-shadow: 0 1px #0091c2;
- transition: width 0.5s;
- }
- .search > div > input::placeholder {
- color: #48e;
- opacity: 1;
- }
- .search > div > input::-ms-placeholder {
- color: #48e;
- }
- .search > div > input::-ms-input-placeholder {
- color: #48e;
- }
- .search > div > input:focus,
- .search > div > input:valid {
- width: 250px;
- }