I am trying to get a simple select field with two options, let's say ac and bc. Somehow, the sub-fields are ignored inside the option-field. How can I fix it to show "c" as an index? So far I've only tried this in Firefox.
Example:
<select>
<option>a<sub>c</sub></option>
<option>b<sub>c</sub></option>
</select>
The option element can only take text as content. You can however, use any unicode character inside it. Unicode has subscript characters built in. You would have to use the unicode characters for subscript.
You could use it like this:
<select name="" id="">
<option value="a">Hello</option>
<option value="a">hₐ</option>
</select>
Your best bet would probably be to just copy and paste whatever subscript character you need.
Related
I have a drop down on a web page which is breaking when the value string contains a quote.
The value is "asd, but in the DOM it always appears as an empty string.
I have tried every way I know to escape the string properly, but to no avail.
<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value=""asd">test</option>
<option value=""asd">test</option>
How do I render this on the page so the postback message contains the correct value?
" is the correct way, the third of your tests:
<option value=""asd">test</option>
You can see this working below, or on jsFiddle.
alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""asd">Test</option>
</select>
Alternatively, you can delimit the attribute value with single quotes:
<option value='"asd'>test</option>
If you are using PHP, try calling htmlentities or htmlspecialchars function.
Per HTML syntax, and even HTML5, the following are all valid options:
<option value=""asd">test</option>
<option value=""asd">test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value="asd>test</option>
<option value="asd>test</option>
Note that if you are using XML syntax the quotes (single or double) are required.
Here's a jsfiddle showing all of the above working.
Another option is replacing double quotes with single quotes if you don't mind whatever it is. But I don't mention this one:
<option value='"asd'>test</option>
I mention this one:
<option value="'asd">test</option>
In my case I used this solution.
If you are using JavaScript and Lodash, then you can use _.escape(), which escapes ", ', <, >, and &.
You really should only allow untrusted data into a whitelist of good attributes like: align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang, marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width
You really want to keep untrusted data out of javascript handlers as well as id or name attributes (they can clobber other elements in the DOM).
Also, if you are putting untrusted data into a SRC or HREF attribute, then its really a untrusted URL so you should validate the URL, make sure its NOT a javascript: URL, and then HTML entity encode.
More details on all of there here: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet
I want to show 3rd in my options tag, but the problem is 'rd' is not shown in super script.
eg,
<select>
<option>3<sup>rd</sup></option>
</select>
doesn't render 'rd' in super script and further more there is no Unicode available to represent 'r' and 'd' in super script.
There are actually superscript chars for Unicode. https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts#Other_superscript_and_subscript_characters
1ˢᵗ
2ⁿᵈ
3ʳᵈ
4ᵗʰ
Unfortunately, you can't use <sup> in <option> as it won't validate.
I have a select ond it's options contains text in hebrew and english. For example:
<select>
<option value="1">(J9J) AMCKDPR ללא הגבלה IAPPLE</option>
<option value="2">(B0A) MICROSOFT-עם הגבלה</option>
</select>
Because my pages are in hebrew, I am using direction:rtl to the page. As result I get the options displayd incorrect, something like:
IDIGITAL ללא הגבלה R9K) MICROUSIM)
If I change the direction of the whole select to ltr, I get the arrow of the select on the right - which is not good.
Is there any way I can set style only to the options of the select?
I am using IE8 and not firefox.
This cannot be done in CSS, since there is no element to set a rule on—you want part of the option element contents to be treated left-to-right, but you cannot use markup for that part. No markup is allowed inside the option element.
Therefore, the issue needs to be dealt with at the character level, using LEFT-TO-RIGHT MARK and RIGHT-TO-LEFT mark, e.g.
<option value="1">(J9J) AMCKDPR ללא הגבלה IAPPLE</option>
I’m not sure how to apply the idea to the second option element; maybe just this way:
<option value="2">(B0A) MICROSOFT-עם הגבלה</option>
but I cannot judge whether the result looks OK, because I can’t really read Hebrew.
Check out Authoring HTML: Handling Right-to-left Scripts.
I have some long text in a html select element.
When a user selects one option the text is displayed as long as the select is.
What is a best solution to make this usable and clear ?
Example
<select>
<option>very long text 1</option>
<option>very long text 2</option>
<option>very long text 3</option>
</select>
The user will see something like " very long t " because of the select element length.
Is there a jquery script or some trick to make the entire text visible ?
I usually truncate the display value (using ... suffix) so that it won't mess up the drop down list, then I set the actual long value as option title:-
<select>
<option value="1" title="the brown fox jumped over the fence">the brown fox...</option>
...
</select>
One option is to replace the <select> with a set of radio buttons / labels. You have more options for formatting the text, and it'll be easier to read.
Or, if don't need to have all the text in the select box, you could shorten the text on the options - maybe use javascript to populate another area on the page with a detailed description of the option they just selected.
Edit --
To lengthen the <select> box, you can set its css width with style="width:250px;", or whatever width you need. (Or put the style in a class, obviously)
I have a drop down on a web page which is breaking when the value string contains a quote.
The value is "asd, but in the DOM it always appears as an empty string.
I have tried every way I know to escape the string properly, but to no avail.
<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value=""asd">test</option>
<option value=""asd">test</option>
How do I render this on the page so the postback message contains the correct value?
" is the correct way, the third of your tests:
<option value=""asd">test</option>
You can see this working below, or on jsFiddle.
alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""asd">Test</option>
</select>
Alternatively, you can delimit the attribute value with single quotes:
<option value='"asd'>test</option>
If you are using PHP, try calling htmlentities or htmlspecialchars function.
Per HTML syntax, and even HTML5, the following are all valid options:
<option value=""asd">test</option>
<option value=""asd">test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value="asd>test</option>
<option value="asd>test</option>
Note that if you are using XML syntax the quotes (single or double) are required.
Here's a jsfiddle showing all of the above working.
Another option is replacing double quotes with single quotes if you don't mind whatever it is. But I don't mention this one:
<option value='"asd'>test</option>
I mention this one:
<option value="'asd">test</option>
In my case I used this solution.
If you are using JavaScript and Lodash, then you can use _.escape(), which escapes ", ', <, >, and &.
You really should only allow untrusted data into a whitelist of good attributes like: align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang, marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width
You really want to keep untrusted data out of javascript handlers as well as id or name attributes (they can clobber other elements in the DOM).
Also, if you are putting untrusted data into a SRC or HREF attribute, then its really a untrusted URL so you should validate the URL, make sure its NOT a javascript: URL, and then HTML entity encode.
More details on all of there here: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet