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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change color of border of a button on tab

    Hi,

    I am trying to change the color of button when a I use the the TAB key on the keyboard to navigate.

    any help?

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    INLINE
    Code:
    <input type="button" value="Button with border" style="color: #07c;border: 2px solid #07c; padding: 2px 5px;" />
    CSS:

    Code:
    <input type="button" value="Button with border" class="borderBTN" />
    Code:
    .borderBTN {color: #07c;border: 2px solid #07c; padding: 2px 5px;}
    Is this what you mean?

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    63
    Thanks
    1
    Thanked 2 Times in 2 Posts
    The only way this could be done is with javascript. It would need to be an onfocus, onkeypress or some kind of keypress reading for this to be possible.

    I would suggest asking in the javascript forum because you will get a fast, more accurate response.

  • #4
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by tempz View Post
    INLINE
    Code:
    <input type="button" value="Button with border" style="color: #07c;border: 2px solid #07c; padding: 2px 5px;" />
    CSS:

    Code:
    <input type="button" value="Button with border" class="borderBTN" />
    Code:
    .borderBTN {color: #07c;border: 2px solid #07c; padding: 2px 5px;}
    Is this what you mean?
    Refrain from using 3 hexidecimal values. stop being lazy and type the whole thing out. some older browsers that aren't css3 compatible (i.e. my work place because my boss is a lazy idiot and wont update them) can't ready that.
    Jonathan R.
    Email: jonathan@logicaldevelopment.net
    Skype, Aim, & Jabber: logicaldevelopment
    Website: http://logicaldevelopment.net/

    NOTE: When contacting me please have the following things ready:

    Thread ID (This can be found in the URL of your thread)
    Budget of Project
    Methods of contacting you/your organization
    Preferred method if many methods are provided

    Any website information that you PM, Email, IM, or otherwise is strictly confidential and will not be disseminated, distributed, or copied in any way, shape or form.

  • #5
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Johnb21 View Post
    The only way this could be done is with javascript. It would need to be an onfocus, onkeypress or some kind of keypress reading for this to be possible.

    I would suggest asking in the javascript forum because you will get a fast, more accurate response.
    And yes this would be the only way to do this.

    Youd have to use a

    document.getElementByID('id').style.background-color = "color";

    Note that the above is pseudo code.
    Jonathan R.
    Email: jonathan@logicaldevelopment.net
    Skype, Aim, & Jabber: logicaldevelopment
    Website: http://logicaldevelopment.net/

    NOTE: When contacting me please have the following things ready:

    Thread ID (This can be found in the URL of your thread)
    Budget of Project
    Methods of contacting you/your organization
    Preferred method if many methods are provided

    Any website information that you PM, Email, IM, or otherwise is strictly confidential and will not be disseminated, distributed, or copied in any way, shape or form.

  • #6
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    This example button change its border color when it is tabbed into.

    Code:
    <input 
       type="button" 
       style="border:2px solid #07c07c;" 
       value="Example" 
       onfocus="this.style.borderColor='blue'">
    Will
    Last edited by Will Bontrager; 07-14-2012 at 08:51 PM. Reason: updated code
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


  •  

    Posting Permissions

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