SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Underline accesskey in submit button

    I'm wanting to underline the accesskey letter for a submit button like the following

    <input type="submit" name="thing" value="Go" id="thing" accesskey="G" />

    Anyone know how to do it?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <button type="submit" name="thing" id="thing" accesskey="G">Go</button>
    Code CSS:
    #thing:first-letter {text-decoration:underline}

    Works in Opera, Chrome, Safari, IE5+. Not in FF3.0, though (don't know about newer versions).
    Birnam wood is come to Dunsinane

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Hm and if there are multiple buttons then IE needs some help too... just one button should be ok tho.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good

    css first letter is a great suggestion but unfortunately I ommited details such as there will be multiple buttons, and sometimes any other letter in the word may be used

    e.g Value="Gingerbread" accesskey="b"

    So in that case I guess I can just do something like:
    <button type="submit" name="thing" id="thing" accesskey="G">Ginger<u>b</u>read</button>


    Also, do you know if there are any other ways to do it?

    Is there no way to do it keeping <input type="submit" ?

    It's a bit of a tricky situation where the aspx code is generated from an untouchable system, so I'm just trying to add css/javascript/jquery to get everything to work out.

    It's actually pretty fun. I guess I can just replace <input type="submit" with <button with js

    Or maybe you can do <input type="submit">Go</input> but I'll look into it tomorrow, gotta sleep

    Thanks

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mejobloggs View Post
    So in that case I guess I can just do something like:
    <button type="submit" name="thing" id="thing" accesskey="G">Ginger<u>b</u>read</button>
    The <u> tag has been deprecated for 13 years, so I wouldn't recommend it. You could use something like this,
    Code HTML4Strict:
    <button type="submit" name="thing" id="thing" accesskey="b">Ginger<b>b</b>read</button>
    Code CSS:
    button b {text-decoration:underline}
    This has he additional (albeit minor) benefit of highlighting the accesskey even in non-CSS browsers.

    Quote Originally Posted by mejobloggs View Post
    Is there no way to do it keeping <input type="submit" ?
    No, at least not with any chance of cross-browser compatibility.

    Quote Originally Posted by mejobloggs View Post
    Or maybe you can do <input type="submit">Go</input>
    No, <input> tags are declared as EMPTY in the DTDs and can never have any content. The end tag is forbidden in HTML.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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