How to make the text box side bar rounded

How to  make  the  text box side bar rounded

If you required that to make the text box side bar rounded  then you can easily  make it by using the css property.

First of all you have to make a simple text box  .

<input type="text" name="site" value="Site Name" style="font-size:24px;"/>

Now you have to make the css property for the text box to make the corner rounded

Thease are as below

.login_fields input[type=text] {width:197px; height:20px;text-shadow: 0px 0px 1px #e4e4e4; border:0px; border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}

By using this class  when you include the class  in your text field it show the  rounded images .

<div class="login_fields"><input type="text" name="site" value="Site Name" style="font-size:24px;"/>

</div>

 Try it

How to add the  loader  on submit button when submit:

If you want  that when you click on login button then it show the other image of other color and then

 Loader on its side

By using java script property  onclick or by css property you can easily do this. You first have to download the images and name the same name  for images  as given or  can chage accordingly .

<script>

function  visibility()

{

        if(document.images)

    {

         

       

        document.images.loading3.style.visibility = 'visible';

        document.images.loading4.style.visibility='visible';}

       

       }

     </script>

<td><input type="image" src="images/btn_login.png" name="submit"  onclick = "javascript:return validateForm();"/>

            <img src="images/btn_logingrey.png"  border="0" name = "loading1" style = "visibility:hidden;margin-left: 10px;margin-top: -5px;"/></td>

            <td><img src="images/loading3.gif"  border="0" name = "loading2" style = "visibility:hidden;"/></td>

You can also  use this property also  for this 

<input type="image" src="images/btn_go.png" name="submit"style = "visibility:visible; float: left;" onclick="this.style.visibility = 'hidden'; if(document.images){document.images.loading.style.visibility = 'visible';}"/>

<img src="images/loading4.gif" alt="" class="left_flo" name = "loading" style = "visibility:hidden; margin-left:-64px;"/>