HTML input placeholder

October 4, 2014 HTML & CSS No comments


Plenty of websites has input forms containing some text, that disappear when user clicks on it or enters own text.

HTML input placeholder

In past, we had to do this using JavaScript. However, today with HTML5 we can do it by simply adding one attribute to the input element. This attribute is placeholder, which takes your desired text as an argument.

Here is the code used to create the input on the image above:

<input class="search-input" type="search" name="search" placeholder="Enter your search terms...">

So simple, isn’t it? It’s time to remove some of the unnecessary JavaScript from your code!

Cool CSS search input with button

September 22, 2014 HTML & CSS No comments


When CSS3 came with the border-radius element, it was like a salvation. The times where creating round corners was made by using graphic files finally come to the end. Damn! What a pain it was when you had to modify something and re-create the graphic file again and again. Today, this torment is over. Take a look how simply you can create beautiful round corners on input boxes, creating interesting effect.

Round-corner search input box

Such a cool effect can be created by applying border-radius on both search input and button elements. One element gets only left borders rounded, the other gets only the right borders rounded, and voila! A few simple lines of the code and we have cool looking search box. No images, no nerves, done in no time.

Here is the code: (more…)