To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquery.
First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.
DownloadCreate 3 files, index.html, style.css and script.jsOpen index.html and write
Jquery input fields | thecodertips.com
»» Tutorial ««
Now open style.css and write#box{
outline: none; /* remove default borders */
padding: 5px; /* zoom it by 5px */
border: 1px solid gray; /* set an black border */
color: gray; /* text in the box is set to gray */
/* set border radius */
-webkit-border-radius: 3px; /* to work with google chrome and safari */
-moz-border-radius: 3px; /* to work with firefox */
border-radius: 3px; /* other browsers like ie */
}
/* when the user is typing in the box */
#box:focus{
border: 1px solid #0066FF;
color: #333;
}
/* to style the tutorial link */
#tut{
text-decoration: none;
color: #0066FF;
}Now open script.js and write$(document).ready(function(){
// set a variable to the box
var box = $("#box");
// once box get's clicked
box.click(function(){
box.val(""); // set it to empty
});
});
We appreciate you for reading our post, but we think it will be better you like our facebook fanpage and also follow us on twitter below.
Title :
Designing input fields using Jquery
Description : To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquer...
Rating :
5