Thursday, February 7, 2013

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;"/>


7 comments:

  1. My brother recommended I would possibly like this web site.
    He was entirely right. This post actually made my day.

    You can not believe simply how a lot time I had spent for this information!
    Thanks!

    Look at my site how to buy a car with bad credit
    Feel free to surf my webpage ; buying a car with bad credit,buy a car with bad credit,how to buy a car with bad credit,buying a car,buy a car,how to buy a car

    ReplyDelete
  2. Greetings from Idaho! I'm bored at work so I decided to check out your site on my iphone during lunch break. I enjoy the information you provide here and can't wait to take a
    look when I get home. I'm amazed at how fast your blog loaded on my mobile .. I'm not even using WIFI, just 3G .
    . Anyways, amazing blog!

    Here is my site rent barcode scanners

    ReplyDelete
  3. First of all I want to say great blog! I had a quick question in which I'd like to ask if you do not mind. I was interested to find out how you center yourself and clear your thoughts before writing. I've had
    a tough time clearing my thoughts in getting my ideas out.
    I truly do enjoy writing however it just seems like the first 10 to
    15 minutes tend to be wasted just trying to figure out how
    to begin. Any recommendations or tips? Many thanks!

    Have a look at my homepage :: bar code printer

    ReplyDelete
  4. 8MEH-RXYFD-JUV72-8922R-FTBZ6-QEMBR-ACED

    ReplyDelete
  5. http://www.taekwondoanimals.com/taekwondo-self-defense-one-step.asp

    ReplyDelete