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?

<button type="submit" name="thing" id="thing" accesskey="G">Go</button>
#thing:first-letter {text-decoration:underline}

Works in Opera, Chrome, Safari, IE5+. Not in FF3.0, though (don’t know about newer versions).

Hm and if there are multiple buttons then IE needs some help too… just one button should be ok tho.

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 :slight_smile:

The <u> tag has been deprecated for 13 years, so I wouldn’t recommend it. You could use something like this,

<button type="submit" name="thing" id="thing" accesskey="b">Ginger<b>b</b>read</button>
button b {text-decoration:underline}

This has he additional (albeit minor) benefit of highlighting the accesskey even in non-CSS browsers.

No, at least not with any chance of cross-browser compatibility.

No, <input> tags are declared as EMPTY in the DTDs and can never have any content. The end tag is forbidden in HTML.