First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.
Open index.html and write
<html>
<head>
<title>Jquery input fields | thecodertips.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<center><a href="http://thecodertips.com" id="tut" title="Read the tutorial">»» Tutorial ««</a><br /><br />
<input type="text" id="box" value="Type something..">
</center>
</body>
</html>
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
});
});
No comments:
Post a Comment