Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: style input box

  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    style input box

    How can I style input boxes with this style="border:1px solid #808080;"? I tried the below in my style sheet but it does not work.

    input {
    background-color: #FFFFFF;
    border: 1 solid #808080 ;
    font-size: 8pt;
    font-weight: normal;
    font-color: black;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Oxfordshire, UK
    Posts
    144
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try putting this in your css

    Code:
    .input-box
    {
    color: #000;
    background: #fff;
    border: #808080 solid 1px
    }
    and create your input boxes with a class id of input-box eg <input type="text" name="name" class="input-box">

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Your problem is you didn't specify px in your CSS. I do the same thing a lot, it bothers me.

    Code:
    input {
    background-color: #FFFFFF;
    border: 1px solid #808080;
    font-size: 8pt;
    font-weight: normal;
    font-color: black;
    }
    That should work.

  • #4
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Yes it works now! One last question. With the submit buttons when it has focus the borders go bold. How can I get the submit boxes to not do that.

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, I think this would do what you want:

    Code:
    input:hover {
    border: 1px solid #808080;
    }
    input:focus {
    border: 1px solid #808080;
    }

  • #6
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Did'nt seem to work

  • #7
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oops, I forgot :active.
    Code:
    input:hover {
    border: 1px solid #808080;
    }
    input:focus {
    border: 1px solid #808080;
    }
    input:active {
    border: 1px solid #808080;
    }
    I'm not quite sure what you mean by "bold". The code I gave you will make it so that when you hover, click, or press and move away from the button, it will not change at all. This is kinda scary for users because they don't know if it worked when they clicked it, so I wouldn't recommend using the code I pasted.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Do you mean the dotted outline on focus?
    Code:
    input {outline: none;}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •