EnglishEspañolMagyarBahasa IndonesiaItaliano한국어PусскийTiếng Việt中文(简体)中文(繁體)In this tutorial, I’d like to explore how you can embellish a simple search form, We won’t be doing anything crazy, instead exploring four different takes on how you can spruce up a search input with the help of CSS transitions" /> EnglishEspañolMagyarBahasa IndonesiaItaliano한국어PусскийTiếng Việt中文(简体)中文(繁體)In this tutorial, I’d like to explore how you can embellish a simple search form, We won’t be doing anything crazy, instead exploring four different takes on how you can spruce up a search input with the help of CSS transitions" />

Tạo Search Form Đẹp Với Css/Html

Difficulty:IntermediateLength:LongLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañolMagyarBahasa IndonesiaItaliano한국어PусскийTiếng Việt中文(简体)中文(繁體)

In this tutorial, I’d like to lớn explore how you can embellish a simple tìm kiếm size. We won’t be doing anything crazy, instead exploring four different takes on how you can spruce up a tìm kiếm input đầu vào with the help of CSS transitions.

Bạn đang xem: Tạo search form đẹp với css/html

If you"d like a ready-made solution, you can find some great CSS transitions on Envakhổng lồ Market that let you create a variety of effects quickly & easily. Or you could hire a developer on Envakhổng lồ Studio.

*

You Already Have a Basic Search Box

In your HTML file you’ll need khổng lồ need khổng lồ create a tìm kiếm input đầu vào to get started. If you take a look at the code below you’ll notice four different things: a .box div, a .container-1 div, an .icon, and the search input đầu vào itself. 


All of the four examples will have a tìm kiếm box – naturally – as well as a looking class ibé. Each of the four examples will be housed in a container so that we can manipulate the tìm kiếm input independently. Lastly, the box div is responsible for keeping the container centered.

*

Adding Font Awesome

Font Awesome is an icon library. You can learn more about the project on Font Awesome’s own website.

The code snippet above sầu is one example of how you can include the ibé within your markup. However, in order for the ibé khổng lồ show up you also need to lớn include a links to lớn the Font Awesome library, demonstrated in the snippet below. Include this link within your document head.

Basic Styling

We"re now going khổng lồ add some styles in a separate stylesheet (which you"ll also need lớn links to from within the document head).

body background: #343d46;.box margin: 100px auto; width: 300px; height: 50px;In the above CSS snippet we are adding some basic styling khổng lồ the page. The style of the tìm kiếm boxes will be navy colored so the body background shouldn"t be stark trắng. The box class is also being centered into the page for the sake of the tutorial. 

*

Embellishing the Search Box

This tutorial is all about learning how lớn embellish the tìm kiếm boxes. In this first example I’ll explain what is going on in greater detail; I want to make sure you know exactly what is going on. In the remaining three examples, I will simply show you how to achieve the various transitions.

#1. Background Fade

The first example we are going to lớn tackle is khổng lồ change the background of the search đầu vào on hover. We will also be adding a transition so that the change isn’t jarring.

The HTML

You’ve sầu already seen the HTML for the basic markup. This snippet will be similar for all the examples.


The CSS

In order to start the styling we need khổng lồ define the CSS style of the search box itself. Let’s add all the various CSS rules one by one so you know exactly what is going on.

.container-1 width: 300px; vertical-align: middle; white-space: nowrap; position: relative;First, we want lớn style the container class. The most important property is arguably position: relative sầu. This is mix specifically so that the ibé can be placed on top of the đầu vào as you’ll see shortly.

.container-1 input#search width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #63717f; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;InputNext we want to style the actual input đầu vào. Everything above is purely aesthetic as the border radius or background colour don’t effect how the đầu vào functions. Do make note of the left padding property. It’s there lớn make room for the icon so that it’s not literally on top of the text within the đầu vào.

Below we have four different rules which colour the placeholder text, which in our example is Search. The rules unfortunately need khổng lồ be separate for the individual vendor prefixes & cannot be consolidated inlớn a shorth& written rule. It’s a little annoying and you’ll see this repeated in every example!

.container-1 input#search::-webkit-input-placeholder color: #65737e;.container-1 input#search:-moz-placeholder /* Firefox 18- */ color: #65737e; .container-1 input#search::-moz-placeholder /* Firefox 19+ */ color: #65737e; .container-1 input#search:-ms-input-placeholder color: #65737e; IconLastly, we"ll style the icon. Most importantly we are setting its position to lớn be placed on top of the input đầu vào by setting its position: absolute. Margins help position the icon in addition to setting its top position to 1/2.

*

.container-1 .icon position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #4f5b66;

Adding Hover Effects

The next set of rules we have sầu to create is what happens to the search box on hover. In this example we only want to lớn change the background color. In order lớn get rid of the yellow or blue glow around the input (which browsers sometimes add) set outline: none. 

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active outline:none; background: #ffffff; As you see in the above sầu snippet, we have sầu added two additional states – focus và active sầu. This way the effect doesn’t disappear when you stop hovering on the đầu vào. More importantly, the effect is also prominent when the input đầu vào is in use.

*

Creating the Transition

In order to make the transition happen we need to lớn add a few lines of code. Return all the way bachồng to lớn the rule where we defined the style of the input đầu vào - .container-1 input#search. Before the closing brackets add the following snippet:

-webkit-transition: background .55s ease; -moz-transition: background .55s ease; -ms-transition: background .55s ease; -o-transition: background .55s ease; transition: background .55s ease;We are defining the transition property shorthand, but we could instead define those three parameters individually. Firstly, we are saying that the transition should only affect the background property. Next, we are saying the transition should take a little over half a second. Lastly, we define the transition effect to be easing. The ease is not the only effect that would work here, we also could have sầu used linear or ease-in, for example. It simply would have looked a bit different. Try it out yourself khổng lồ see if you like them better. 

The đầu vào style should now look lượt thích the code below.

.container-1 input#search width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: background .55s ease; -moz-transition: background .55s ease; -ms-transition: background .55s ease; -o-transition: background .55s ease; transition: background .55s ease;

How vì CSS Transitions Work?

If you don’t know anything about CSS transitions, let me give sầu you a brief overview. First, in order for the transition to work, the property needs to be defined on the default state & not on hover, or on active sầu or on focus.

CSS transitions allow for gradually changing effect và you can define specific parameters lớn control, such as which property will be affected, the duration of the transition và the kind of transition. You can have sầu multiple transitions mix for one element. But, most importantly, you should always include vendor prefixes in order khổng lồ accommodate the various browsers, as the tư vấn for this property is not yet universal.

Xem thêm: Tabc Là Gì - Binance Là Gì

For more information take a look at: CSS3 Transitions And Transforms From Scratch

#2. Expvà Input on Hover

In this example the search will start out as only the looking glass icon. When you hover over the inhỏ, the tìm kiếm will exp& at which point you can then type in your query. The majority of the code in this example will be very similar khổng lồ the previous example. 

The HTML


The CSS

.container-2 width: 300px; vertical-align: middle; white-space: nowrap; position: relative;The đầu vào styling for this transition is different. The input is significantly smaller so that the inhỏ can appear khổng lồ be behind a square. All of the remaining properties, like background or phông color, are the same as we don’t want to lớn change the styling of the tìm kiếm completely. 

.container-2 input#search width: 50px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #262626; padding-left: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; -webkit-transition: width .55s ease; -moz-transition: width .55s ease; -ms-transition: width .55s ease; -o-transition: width .55s ease; transition: width .55s ease;As you can also see I’ve sầu redefined the transition property to lớn affect only the width. I’ve sầu kept the time the same because it’s quick enough not khổng lồ annoy users, yet long enough to lớn create a nice effect. 

Below is the code for recoloring the placeholder text.

.container-2 input#search::-webkit-input-placeholder color: #65737e;.container-2 input#search:-moz-placeholder /* Firefox 18- */ color: #65737e; .container-2 input#search::-moz-placeholder /* Firefox 19+ */ color: #65737e; .container-2 input#search:-ms-input-placeholder color: #65737e; And once again we have the ibé CSS style. It should be the same as in the previous example.

.container-2 .icon position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #4f5b66;

*

Adding the Hover Effects

The very last thing we need to lớn bởi vì is lớn define how the search will look like when it"s being hovered over. In the snippet below the first rule makes sure that the size doesn’t have the browser-induced glow và that when you are using the input đầu vào – when typing in it – the search box remains expanded. The middle rule just expands the đầu vào lớn full width on hover. 

.container-2 input#search:focus, .container-2 input#search:active outline:none; width: 300px;.container-2:hover input#searchwidth: 300px;.container-2:hover .icon color: #93a2ad;The very last thing happening in the above code is that on hover the inhỏ changes its color. It’s just a small detail lớn quickly show a user that the search box is active sầu và working, rather than an idle đầu vào. The change is not implemented by a transition.

*

#3. Increasing Inhỏ Size on Hover

Out of all the four examples, this one is the most subtle, both in terms of code and visual effect. In this case the looking glass inhỏ is going to lớn pop up slightly and increase in kích cỡ. 

The HTML

Once again the HTML markup of the icon và the tìm kiếm box is the same as in the previous two examples. The exception, of course, is the .container-3.


The CSS

The CSS for this example is nothing special. For the most part it starts out very similar to lớn the first examples where the mặc định state is no different at all. Below is the code for the container and the input đầu vào. lưu ý that there is no transition on the input đầu vào this time around.

.container-3 width: 300px; vertical-align: middle; white-space: nowrap; position: relative;.container-3 input#search width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff;Once more we have sầu the placeholder rules.

.container-3 input#search::-webkit-input-placeholder color: #65737e;.container-3 input#search:-moz-placeholder /* Firefox 18- */ color: #65737e; .container-3 input#search::-moz-placeholder /* Firefox 19+ */ color: #65737e; .container-3 input#search:-ms-input-placeholder color: #65737e; Now, by the look of it, the inhỏ for this example is the same as well. It’s the same color, the same position và so on. However, I have added a transition lớn it. These transitions target all properties, which is a shorter approach rather than spelling them out individually.

.container-3 .icon position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #4f5b66; -webkit-transition: all .55s ease; -moz-transition: all .55s ease; -ms-transition: all .55s ease; -o-transition: all .55s ease; transition: all .55s ease;

*

Adding the Hover Effects

.container-3 input#search:focus, .container-3 input#search:active outline:none; .container-3:hover .icon margin-top: 16px; color: #93a2ad; -webkit-transform:scale(1.5); /* Safari & Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform:scale(1.5); /* Opera */ transform:scale(1.5); There are a couple of things happening in the above sầu code. Firstly, we are changing the color of the inhỏ on hover and moving it a bit higher so that it’s vertically centered when it’s bigger. Secondly we are adding a transformation to the icon element on hover so that it will in fact be 1.5 times its original kích cỡ. Because the previously defined transition was mix lớn impact all properties, it appears as if the inhỏ grows in form size on hover.

Again, take a look at CSS3 Transitions And Transforms From Scratch khổng lồ learn more about the transformation property.

*

#4. On Hover Button

Unlike the last three examples, this one will be more complex. On hover, a button will slide on top of the input đầu vào lớn let you proceed – kind of lượt thích Send or Go. The button will have sầu the looking glass icon within it.

The HTML


Here the HTML is a bit different. The input is still there, of course, but the inhỏ is now inside a button element which comes after the input. It’s important that the button is after the input đầu vào as it relates khổng lồ how the hover effect will be created in CSS.

*

The CSS

The CSS in this example is different so pay attention! Below is the snippet for styling the container. First, position: relative is missing; it’s no longer important as the ibé doesn’t rely on it lớn be placed on top of the input đầu vào. However, we vì chưng have sầu overflow:hidden. This keeps the button from showing up when it’s not on hover. Technically the button that appears is present lớn the right of the đầu vào, but thanks khổng lồ overflow:hidden it’s not showing when it falls beyond the width of the container – the container và the đầu vào are the same width. 

.container-4 overflow: hidden; width: 300px; vertical-align: middle; white-space: nowrap;Below the input doesn’t have sầu the transition because it’s not the element being affected this time around.

.container-4 input#search width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #fff; padding-left: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;The snippet lớn recolor the placeholders is next. 

.container-4 input#search::-webkit-input-placeholder color: #65737e;.container-4 input#search:-moz-placeholder /* Firefox 18- */ color: #65737e; .container-4 input#search::-moz-placeholder /* Firefox 19+ */ color: #65737e; .container-4 input#search:-ms-input-placeholder color: #65737e; Below is the code to style the button that appears on hover. The triông xã khổng lồ making it slide in from the side is khổng lồ place it right behind the input, & make it invisible unless on hover. The button is the element that changes - it moves – therefore it’s the one where the transition is defined. To make things simpler, I’ve identified the transition to lớn impact all properties. 

.container-4 button.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: none; background: #232833; height: 50px; width: 50px; color: #4f5b66; opacity: 0; font-size: 10pt; -webkit-transition: all .55s ease; -moz-transition: all .55s ease; -ms-transition: all .55s ease; -o-transition: all .55s ease; transition: all .55s ease;

*

Adding the Hover Effects

In order lớn fade in the button, it needs to lớn be moved on top of the input đầu vào. That’s done through the negative margin. Previously we phối the opacity of the button khổng lồ 0 so we have lớn rephối it khổng lồ 1 in order that the button can be visible too.

*

The last rule only changes the background of the button if you hover over the button. It’s good khổng lồ let a user know that the button is active và you can cliông xã it to lớn submit the search; there is no point in having a button if it appears inactive sầu.

.container-4:hover button.inhỏ, .container-4:active button.icon, .container-4:focus button.icon outline: none; opacity: 1; margin-left: -50px; .container-4:hover button.icon:hover background: white;

*

Conclusion

Well, that brings us khổng lồ the kết thúc of our CSS experiments! We took a basic tìm kiếm size input and used a small selection of effects khổng lồ change its behavior. How else would you suggest changing a tìm kiếm đầu vào lượt thích this? What other aspects of it would you apply CSS transitions or transforms to? Let us know in the comments!

Learn CSS: The Complete Guide

We"ve sầu built a complete guide khổng lồ help you learn CSS, whether you"re just getting started with the basics or you want lớn explore more advanced CSS.