Creative Search Bar and Input Field Design Inspiration

27th September 2021

sangeeths97

Page Index

A successful UI design can attract new customers, increase customer engagement and enhance business. A well-designed search bar and input field will enhance user experience.

Styled Search Bar Design with Code Link

In the face of complicated web content, users express their needs by searching keywords, expecting to obtain accurate information and quick and smooth user experience.

1. Search bar from the search icon

Click on the search icon to open the animated search bar, then type your keyword. The circle is expanded in search icon as search bar when the icon is clicked. The Demo and HTML/SCSS code for this search bar is given below.

HTML

<div class="search">
	<input type="text" placeholder=" ">
	<div>
		<svg>
			<use xlink:href="#path">
		</svg>
	</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 		28" id="path">
		<path d="M32.9418651,-20.6880772 C37.9418651,-20.6880772 40.9418651,-16.6880772 40.9418651,-12.6880772 C40.9418651,-8.68807717 37.9418651,-4.68807717 32.9418651,-4.68807717 C27.9418651,-4.68807717 24.9418651,-8.68807717 24.9418651,-12.6880772 C24.9418651,-16.6880772 27.9418651,-20.6880772 32.9418651,-20.6880772 L32.9418651,-29.870624 C32.9418651,-30.3676803 33.3448089,-30.770624 33.8418651,-30.770624 C34.08056,-30.770624 34.3094785,-30.6758029 34.4782612,-30.5070201 L141.371843,76.386562" transform="translate(83.156854, 22.171573) rotate(-225.000000) translate(-83.156854, -22.171573)"></path>
	</symbol>
</svg>
<a class="dribbble" href="https://dribbble.com/shots/5547403-Search-input-animation" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>

SCSS

.search {
	display: table;
	input {
		background: none;
		border: none;
		outline: none;
		width: 28px;
		min-width: 0;
		padding: 0;
		z-index: 1;
		position: relative;
		line-height: 18px;
		margin: 5px  0;
		font-size: 14px;
		-webkit-appearance: none;
		transition: all  .6s  ease;
		cursor: pointer;
		color: rgb(30, 19, 190);
		& + div {
			position: relative;
			height: 28px;
			width: 100%;
			margin: -28px  0  0  0;
			svg {
				display: block;
				position: absolute;
				height: 28px;
				width: 160px;
				right: 0;
				top: 0;
				fill: none;
				stroke: rgb(30, 19, 190);
				stroke-width: 1.5px;
				stroke-dashoffset: 212.908  +  59;
				stroke-dasharray: 59  212.908;
				transition: all  .6s  ease;
			}
		}
		&:not(:placeholder-shown),
		&:focus {
			width: 160px;
			padding: 0  4px;
			cursor: text;
			&+ div {
				svg {
					stroke-dasharray: 150  212.908;
					stroke-dashoffset: 300;
				}
			}
		}
	}
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
* {
	box-sizing: inherit;
	&:before,
	&:after {
		box-sizing: inherit;
	}
}

2. Hover to expand search bar

Hover the search icon to open search bar. The search bar is expanded when the search icon is hovered. The Demo and HTML/SCSS code for this search bar is given below.

HTML

<div  class="searchDiv">
	<input  class="search"  type="text"  placeholder="Search here">
	<button  class="searchBut"  href="#">
		<svg  width="19"  height="19"  viewBox="0 0 19 19"  fill="none"  xmlns="http://www.w3.org/2000/svg">
		<path  fill-rule="evenodd"  clip-rule="evenodd" d="M13.9748 12.3869C13.8971 12.3092 13.5273 12.6902 13.4495 12.6125C13.3522 12.5151 13.4495 11.8614 13.4495 11.8614C14.382 10.5896 14.8815 9.05195 14.8746 7.4749C14.8568 3.35829 11.5273 0.0238522 7.41088 7.56207e-05C5.44094 -0.00883756 3.54925 0.770504 2.15724 2.16449C0.765226 3.55847 -0.0114882 5.45129 0.000128455 7.42129C0.0179204 11.5383 3.34769 14.873 7.46448 14.8968C9.04789 14.9037 10.5911 14.3983 11.8637 13.4561L11.8691 13.4521C11.8691 13.4521 12.4696 13.3585 12.5631 13.4521C12.6331 13.5221 12.2925 13.8756 12.3681 13.9513C14.0624 15.6466 17.0664 18.6522 17.0664 18.6522C17.3474 18.947 17.7661 19.0663 18.1602 18.964C18.5544 18.8616 18.8622 18.5536 18.9642 18.1593C19.0662 17.765 18.9465 17.3464 18.6515 17.0656C18.6515 17.0656 15.5337 13.9465 13.9748 12.3869ZM7.45905 13.4066C4.1658 13.3876 1.50203 10.7201 1.48757 7.42672C1.47868 5.85093 2.1001 4.33697 3.21351 3.22187C4.32691 2.10676 5.83988 1.48307 7.41563 1.48961C10.7089 1.50856 13.3727 4.17607 13.3871 7.46948C13.396 9.04527 12.7746 10.5592 11.6612 11.6743C10.5478 12.7894 9.0348 13.4131 7.45905 13.4066Z" fill="#fff" />
		</svg>
	</button>
</div>

SCSS

.searchDiv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	background: #000;
	height: 40px;
	border-radius: 40px;
	padding: 10px;
	&:hover {
		.search {
			width: 240px;
			padding: 0  6px;
		}
		.searchBut {
			background: white;
			color: #000;
			svg {
				path {
					fill: #000;
				}
			}
		}
	}
	.searchBut {
		color: white;
		float: right;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0px;
		transition: 0.4s;
	}
	.search {
		border: none;
		background: none;
		outline: none;
		float: left;
		padding: 0;
		color: white;
		font-size: 16px;
		transition: 0.4s;
		line-height: 40px;
		width: 0px;
	}
}

3. Animated search bar from the search icon

Click on the search icon to open the animated search bar. The search icon is replaced by the search bar when the icon is clicked. The Demo and HTML/CSS code for this search bar is given below.

HTML

<div  class="flexbox">
	<div  class="search">
		<div>
			<input  type="text"  placeholder="Search . . ." required>
		</div>
	</div>
</div>

SCSS

.flexbox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .search {
        margin: 300px;
        div {
            display: inline-block;
            position: relative;
            &:after {
                content: "";
                background: rgb(87, 15, 105);
                width: 4px;
                height: 20px;
                position: absolute;
                top: 40px;
                right: 2px;
                transform: rotate(135deg);
            }
            input {
                color: rgb(87, 15, 105);
                font-size: 16px;
                background: transparent;
                width: 25px;
                height: 25px;
                padding: 10px;
                border: solid 3px rgb(87, 15, 105);
                outline: none;
                border-radius: 35px;
                transition: width 0.5s;
                &::placeholder {
                    color: rgb(87, 15, 105);
                    opacity: 0;
                    transition: opacity 150ms ease-out;
                }
                &:focus::placeholder {
                    opacity: 1;
                }
                &:focus {
                    width: 250px;
                }
                &:not(:placeholder-shown) {
                    width: 250px;
                }
            }
        }
    }
}

4. Animated search bar from the search icon

Click on the search icon to open the animated search bar. The search icon is replaced by the search bar when the icon is clicked. The Demo and HTML/SCSS code for this search bar is given below.

HTML

<div  class="searchDiv">
	<form  action=""  autocomplete="on">
		<input  class="search"  name="search"  type="text"  placeholder="Search here">
		<input  class="search_submit"  type="submit">
	</form>
</div>

SCSS

.searchDiv {
    margin: 50px 100px;
    display: inline-block;
    position: relative;
    height: 60px;
    float: right;
    padding: 0;
    position: relative;
    .search {
        height: 60px;
        font-size: 55px;
        display: inline-block;
        font-family: "Lato";
        font-weight: 100;
        border: none;
        outline: none;
        color: #555;
        padding: 3px;
        padding-right: 60px;
        width: 0px;
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        z-index: 3;
        transition: width 0.4s cubic-bezier(0, 0.795, 0, 1);
        cursor: pointer;
        &:focus:hover {
            border-bottom: 1px solid #bbb;
        }
        &:focus {
            width: 700px;
            z-index: 1;
            border-bottom: 1px solid #bbb;
            cursor: text;
        }
    }
    .search_submit {
        height: 67px;
        width: 63px;
        display: inline-block;
        color: red;
        float: right;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=)
            center center no-repeat;
        text-indent: -10000px;
        border: none;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        cursor: pointer;
        opacity: 0.4;
        cursor: pointer;
        transition: opacity 0.4s ease;
        &:hover {
            opacity: 0.8;
        }
    }
}

Styled Input Field Design with Code Link

The default html input form is very ugly and it is very important to make an input field look elegant and make it easy for the user to understand why the input field is to.

1. Floating label input field

Focus on the input field to move placeholder to top. So user can see the placeholder even after the input field is focused. The Demo and HTML/SCSS code for this search bar is given below.

HTML

<div class="floating-form">
	<div class="floating-label">
		<input class="floating-input"  type="text"  placeholder=" ">
		<label>Placeholder</label>
	</div>
</div>

SCSS

.floating-form {
	width: 400px;
	.floating-label {
		position: relative;
	}
	.floating-input {
		font-size: 18px;
		padding: 10px  10px;
		display: block;
		width: 100%;
		height: 30px;
		background-color: #a913d6;
		border: none;
		color: #fff;
		height: 3.5rem;
		border-radius: 5px;
		&:focus {
			outline: none;
		}
		&:focus ~ label {
			top: -18px;
			font-size: 14px;
			color: #a913d6;
		}
		&:focus ~ .bar:before {
			width: 50%;
	}
		&:focus ~ .bar:after {
			width: 50%;
		}
		&:not(:placeholder-shown) ~ label {
			top: -18px;
			font-size: 14px;
			color: #a913d6;
		}
		&:focus ~ .highlight {
			-webkit-animation: inputHighlighter 0.7s  ease;
			-moz-animation: inputHighlighter 0.7s  ease;
			animation: inputHighlighter 0.7s  ease;
		}
	}
	label {
		color: #fff;
		font-size: 18px;
		font-weight: normal;
		position: absolute;
		pointer-events: none;
		left: 1rem;
		top: 1.15rem;
		transition: 0.4s  ease  all;
		-moz-transition: 0.4s  ease  all;
		-webkit-transition: 0.4s  ease  all;
	}
}
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

2. Border effect on Input Field

Focus on the input field to change border. The Demo and HTML/CSS code for this search bar is given below.

HTML

<div  class="col-3">
	<input  class="effect"  type="text"  placeholder="Placeholder Text">
	<span  class="focus-border">
		<i></i>
	</span>
</div>

SCSS

.col-3 {
    float: left;
    width: 27.33%;
    margin: 25%;
    position: relative;
    .effect {
        color: #333;
        width: 100%;
        box-sizing: border-box;
        height: 3rem;
        border: 2px solid #ccc;
        padding: 7px 14px 9px;
        transition: 0.4s;
        &:focus {
            color: #b415db;
            outline: none;
            & ~ .focus-border:after,
            & ~ .focus-border:before {
                width: 100%;
                transition: 0.3s;
            }
            & ~ .focus-border {
                i {
                    &:after,
                    &:before {
                        height: 100%;
                        transition: 0.4s;
                    }
                }
            }
        }
    }
    .focus-border {
        &:after,
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #b415db;
            transition: 0.3s;
        }
        &:after {
            top: auto;
            bottom: 0;
            left: auto;
            right: 0;
        }
        i {
            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 0;
                background-color: #b415db;
                transition: 0.4s;
            }
            &:after {
                left: auto;
                right: 0;
                top: auto;
                bottom: 0;
            }
        }
    }
}

3. Floating label with border effects

Focus on the input field to change border and move placeholder to top. The Demo and HTML/CSS code for this search bar is given below.

HTML

<div  class="col-3 input-effect">
	<input  class="effect"  type="text"  placeholder="">
	<label>First Name</label>
	<span  class="focus-border">
		<i></i>
	</span>
</div>

SCSS

.col-3 {
    float: left;
    width: 27.33%;
    position: relative;
    .effect {
        border: 1px solid #ccc;
        padding: 7px 14px;
        transition: 0.4s;
        background: transparent;
        font: 15px/24px "Lato", Arial, sans-serif;
        color: #333;
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 1px;
        &:focus {
            color: #b415db;
            outline: none;
            & ~ .focus-border {
                &:after,
                &:before {
                    width: 100%;
                    transition: 0.3s;
                }
                i {
                    &:after,
                    &:before {
                        height: 100%;
                        transition: 0.4s;
                    }
                }
            }
            & ~ label {
                top: -18px;
                left: 0;
                font-size: 12px;
                color: #b415db;
                transition: 0.3s;
            }
        }
        & ~ .focus-border {
            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: #b415db;
                transition: 0.3s;
            }
            &:after {
                top: auto;
                bottom: 0;
                left: auto;
                right: 0;
            }
            i {
                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 2px;
                    height: 0;
                    background-color: #b415db;
                    transition: 0.4s;
                }
                &:after {
                    left: auto;
                    right: 0;
                    top: auto;
                    bottom: 0;
                }
            }
        }
        & ~ label {
            position: absolute;
            left: 14px;
            width: 100%;
            top: 10px;
            color: #aaa;
            transition: 0.3s;
            z-index: -1;
            letter-spacing: 0.5px;
        }
    }
}

Conclusion

Hope you were able to build custom search boxes or input fields for your own works with the help of the search bar and input field design examples and analysis explained above.

About the Author

View Profile

sangeeths97

0Blogs

0Followers

0Following

Related Blogs

View All Blogs

No blogs!

Want #swag?

Join our monthly raffle!

Every month, One Lucky Duck gets free swag shipped to their doorstep, wherever in the world you are! All you have to do is join our Discord channel today and tweet about the amazing things we do. #nullcast #luckyduck

We will announce the winners on Twitter and through our discord channel.

JOIN THE FLOCK