我怎样才能像表格一样选择选项？ [英] How can I style a select option like a table?
问题描述
我有一个表单选择下拉菜单，我想要格式化选项的内部文本。每个选项都有一个月，一年和一个标题。我希望每个人都彼此对齐。我曾尝试在选项元素内放置一个表格，以查看我是否可以强制它，但是失败了。我尝试使用不间断的空格，但也失败了（我相信因为字母的字体家族风格）。
这里是我的代码：
< form>
< label>我想以每月，每年和每个标题相互对齐的方式对其进行设置< / label>
< select id =news2>
< option selected value =点击此处>< / option>
< option value =1> 2000年1月 - 标题1< / option>
< option value =2> FEB 1191 - Title 2< / option>
< option value =3> 2014年3月 - 标题3< / option>
< option value =4> APR 1995 - 标题4< / option>
< option value =5> MAY 2034 - Title 5< / option>
< option value =6> JUNE 2210 - Title 6< / option>
< option value =7> 1991年7月 - 标题7< / option>
< / select>
< / form>
我将代码中的文本对齐以演示如何在下拉菜单中排列它。我知道这个字体是等宽的，但我使用的字体不是。我也有一个小提琴 http://jsfiddle.net/n83ahz5q/
在我大部分时间里问题，我尝试减少脚本的数量，如果可能的话，我更喜欢html / css解决方案。如果没有，我也可以做原生JavaScript。
感谢您给出的任何建议。
选项元素是纯文本，所以你不能指定任何部分作为表格单元格。 在这个方向上你可以做的最好的事情是将字体设置为等宽字体，在选项元素内打破空格而不是空格，而不是折叠的空格序列。 （设置 white-space：pre ）理论上可行，但实际上并非如此：浏览器忽略选择和 option 元素，因为它们是以特殊方式实现的。）示例（我在这里使用真正的不间断空格;您可能更喜欢& nbsp; ，例如 JAN& nbsp;& nbsp; 2000 ）：
<风格>
＃news2，＃news2选项{
font-family：Consolas，等宽;
}
< / style>
< select id =news2>
< option selected value =点击此处>< / option>
< option value =1> 2000年1月 - 标题1< / option>
< option value =2> FEB 1191 - Title 2< / option>
< option value =3> 2014年3月 - 标题3< / option>
< option value =4> APR 1995 - 标题4< / option>
< option value =5> MAY 2034 - Title 5< / option>
< option value =6> JUNE 2210 - Title 6< / option>
< option value =7> 1991年7月 - 标题7< / option>
< / select>
在这种情况下，您实际上并不需要无空格空格，如果您始终使用三位数月份缩写（包括JUN和JUL）。
一种非常不同的方法，让您使用任何字体，就是使用一组单选按钮而不是选择元素。然后你可以把替代品的部分标签放在表格单元格中。 （这会导致可访问性方面的问题，因为在逻辑上，单个标签已被拆分为多个元素，因此您无法以常规方式将标签与 input 元素相关联）例如：
< table>
< tr>< td>< input type =radioname =news2value =1>
< td> JAN
< td> 2000
< td> - 标题1
< tr>< td>< input type =radioname =news2value =2>
< td> FEB
< td> 1191
< td> - 标题2
< tr>< td>< input type =radioname =news2value =3>
< td> MAR
< td> 2014
< td> - 标题3
< tr>< td>< input type =radioname =news2value =4>
< td> APR
< td> 1995
< td> - 标题4
< tr>< td>< input type =radioname =news2value =5>
< td> MAY
< td> 2034
< td> - 标题5
< tr>< td>< input type =radioname =news2value =6>
< td> JUNE
< td> 2210
< td> - 标题6
< tr>< td>< input type =radioname =news2value =7>
< td> 7月
< td> 1991
< td> - 标题7
< / table>
我的 jsfiddle 显示了两种替代方案。
I have a form select drop-down that I would like to format the inner text of the options. Each option has a month, year, and a title. I would like for each to be aligned with each other. I have tried placing a table inside the option element to see if I can force it, but it failed. I tried using nonbreaking spaces, but that failed as well (I believe because of the font-family style for the letters). Here is the code I have:
<form>
<label>I would like to style this in a manner in which the months, years, and title are aligned with each other</label>
<select id="news2">
<option selected value="Click Here"></option>
<option value="1"> JAN 2000 - Title 1 </option>
<option value="2"> FEB 1191 - Title 2 </option>
<option value="3"> MAR 2014 - Title 3 </option>
<option value="4"> APR 1995 - Title 4 </option>
<option value="5"> MAY 2034 - Title 5 </option>
<option value="6"> JUNE 2210 - Title 6 </option>
<option value="7"> JULY 1991 - Title 7 </option>
</select>
</form>
I aligned the text in the code to demonstrate how I would like it lined up on the drop down. I am aware that this font is monospaced, but the font that I am using is not. I also have a fiddle http://jsfiddle.net/n83ahz5q/ As in most of my questions, I try to reduce the amount scripting, I would prefer an html/css solution if at all possible. If not, I can do native javascript too.
Thank you for any advice you can give.
You cannot format a select element as a table, since the content of option elements is plain text, so you cannot designate any parts there as table cells.
The best you can do in that direction is to set the font to monospace and use no-break spaces instead of normal spaces inside the option elements, for sequences of spaces that should not collapse. (Setting white-space: pre would work in theory, but not in practice: browsers ignore it for select and option elements, as they are implemented in special ways.) Example (I’m using real no-break spaces here; you might prefer , e.g. JAN 2000):
<style>
#news2, #news2 option {
font-family: Consolas, monospace;
}
</style>
<select id="news2">
<option selected value="Click Here"></option>
<option value="1"> JAN 2000 - Title 1 </option>
<option value="2"> FEB 1191 - Title 2 </option>
<option value="3"> MAR 2014 - Title 3 </option>
<option value="4"> APR 1995 - Title 4 </option>
<option value="5"> MAY 2034 - Title 5 </option>
<option value="6"> JUNE 2210 - Title 6 </option>
<option value="7"> JULY 1991 - Title 7 </option>
</select>
You don’t actually need no-break spaces in this case, if you use consistently three-digit month abbreviations (including JUN and JUL).
A very different approach, letting you use any font, is to use a set of radio buttons instead of a select element. Then you can put parts of the labels of the alternatives in table cells. (This causes problems in accessibility, since what is logically a single label has been split into several elements, so you can’t associate the label with an input element in a normal way.) Example:
<table>
<tr><td><input type="radio" name="news2" value="1">
<td>JAN
<td>2000
<td>- Title 1
<tr><td><input type="radio" name="news2" value="2">
<td>FEB
<td>1191
<td>- Title 2
<tr><td><input type="radio" name="news2" value="3">
<td>MAR
<td>2014
<td>- Title 3
<tr><td><input type="radio" name="news2" value="4">
<td>APR
<td>1995
<td>- Title 4
<tr><td><input type="radio" name="news2" value="5">
<td>MAY
<td>2034
<td>- Title 5
<tr><td><input type="radio" name="news2" value="6">
<td>JUNE
<td>2210
<td>- Title 6
<tr><td><input type="radio" name="news2" value="7">
<td>JULY
<td>1991
<td>- Title 7
</table>
My jsfiddle shows both alternatives in action.
这篇关于我怎样才能像表格一样选择选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
