div.search-box
	input(type="text", placeholder=" ")
	span
View Compiled
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
}

.search-box {
	border: solid 5px black;
	display: inline-block;
	position: relative;
	border-radius: 50px;
	input[type="text"] {
		font-family: Raleway, sans-serif;
		font-size: 20px;
		font-weight: bold;
		width: 50px;
		height: 50px;
		padding: 5px 40px 5px 10px;
		border: none;
		box-sizing: border-box;
		border-radius: 50px;
		transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
		&:focus {
			outline: none;
		}
		&:focus, &:not(:placeholder-shown) {
			width: 300px;
			transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
			+ span {
				bottom: 13px;
				right: 10px;
				transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
			}
			+ span:after {
				top: 0;
				right: 10px;
				opacity: 1;
				transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms, opacity 300ms ease 1100ms;
			}
		}
	}
	span {
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: -13px;
		right: -15px;
		transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
		&:before, &:after {
			content: '';
			height: 25px;
			border-left: solid 5px black;
			position: absolute;
			transform: rotate(-45deg);
		}
		&:after {
			transform: rotate(45deg);
			opacity: 0;
			top: -20px;
			right: -10px;
			transition: top 300ms ease-out, right 300ms ease-out, opacity 300ms ease-out;
		}
	}
}
'use strict';

var searchBox = document.querySelectorAll('.search-box input[type="text"] + span');

searchBox.forEach((elm) => {
	elm.addEventListener('click', () => {
		elm.previousElementSibling.value = '';
	});
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.