Is it possible to use superscript text in the value field of the <input> tag (for example to use with registration mark)?
<input type="submit" name="submit" value="Sometext®"/>
Add a comment
|
3 Answers
You could use the <button type="submit"> element instead of <input type="submit"> Then you can include any markup you want in the description, like, e.g., <sup> for superscripted text:
<button type="submit">someText with <sup>superscripted parts</sup> </button>
3 Comments
Quentin
Note that this will cause problems in oldish-IE if you have multiple submit buttons that you want to distinguish between on the server. If that isn't the case, this is the best approach to the problem.
tomexx
Let's say I am not able to use <button> element. Any other solution?
Sirko
@tomexx You could resemble the same behavior using a
<div> with the same contents and styling. Then you would have to attach a JavaScript click handler to that <div> to trigger the form submission.Or with CSS:
HTML
<button class="tradeMark" type="submit">someText with</button>
CSS
.tradeMark:after{
content: ' ©';
font-size:xx-small;
vertical-align:top;
}
EDIT: this solution too won't work with <input type="submit"/> , cause :after and :before are not applied...
Comments
If you must use <input type=submit> and not <button type=submit>, you are out of luck. The text must be specified in the value attribute, which is taken as plain text. You could use superscript characters like “²” there, but there is more superscript version of “®” as a character – but its appearance varies greatly across fonts, being much more superscript in some fonts than e.g. in Arial.
So the practical move might be to specify a different font for the button. For consistency, you would then probably want to use that same font for all submit button texts, e.g.
input[type=submit] { font-family: Calibri; }
Usual CSS Caveats apply. In particular, it can be difficult to specify a good list of font families in this context. (Calibri is great, but its availability is far from universal.)
