相关疑难解决方法(0)
在"SELECT"标记中渲染"OPTION"的层次结构
我的问题是HTML和CSS相关.我有一个层次结构类型结构,我想在列表中显示.层次结构包含国家,州和城市(深层次为三级).
我想在选择列表中显示列表,每个项目类型(国家,州,城市)必须是可选择的.这些项目应缩进为:
United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan
问题在于缩进.我试图使用margin-left或padding-left来缩进标签,这在FireFox中显示正确但在IE7中不正确.这是生成的选择列表的示例:
<select name="Something">
<option style="padding-left: 0">United States</option>
<option style="padding-left: 20px">Hawaii</option>
<option style="padding-left: 40px">Kauai</option>
<option style="padding-left: 20px">Washington</option>
<option style="padding-left: 40px">Seattle</option>
<option style="padding-left: 40px">Chelan</option>
</select>
我想在不使用CSS hacks的情况下在浏览器中实现一致的缩进.
推荐指数
解决办法
查看次数
填充在选择列表中的Safari和IE中不起作用
有没有人知道为什么我的Safari没有选择列表中的填充？它在FF工作正常,请告诉我该怎么做.doctype有什么问题吗？
码:
<select style="padding-left:15px">
<option>male></option>
<option>female></option>
</select>
我正在使用以下doctype;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
推荐指数
解决办法
查看次数
树状选择HTML
我正在尝试<select>使用HTML和CSS 创建树状.
为了保持可访问性,我想尽可能避免使用javascript.我也想避免使用 而不是填充,因为这可以防止按下字母键跳转到项目.
到目前为止我所拥有的是:
<select>
<optgroup label="fluffy" style="padding-left: 10px;"></optgroup>
<optgroup label="kitties" style="padding-left: 20px;"></optgroup>
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
<optgroup label="puppies" style="padding-left: 20px;"></optgroup>
<option value="3" style="padding-left: 30px;">Doggins</option>
<optgroup label="not fluffy" style="padding-left: 10px;"></optgroup>
<optgroup label="snakes" style="padding-left: 20px;"></optgroup>
<option value="4" style="padding-left: 30px;">Fingers</option>
<optgroup label="crabs" style="padding-left: 20px;"></optgroup>
<option value="5" style="padding-left: 30px;">Lucky (AKA Citizen Snips)</option>
</select>
这在Firefox中运行良好,但IE忽略填充,将其呈现为平面列表(非常难以使用),Chrome不会渲染<optgroup>s,这在技术上无效,因为<optgroup>它应该包含至少on <option>.
不幸的是,<optgroup>s不能嵌套.
推荐指数
解决办法
查看次数
如何使用CSS缩进多个级别的select optgroup？
只是试图通过嵌套深度来缩进optgroup块,我已经尝试了一般margin-left规则,嵌套元素然后尝试应用相同的规则,尝试过padding-left......这样的缩进是可能的吗？看起来很简单:P
在下面的示例中,标记为"client2_a"的optgroup应缩进比其他标记更多,因为它嵌套在"client2"中.
推荐指数
解决办法
查看次数
HTML/CSS:<select>字段中的嵌套<options>？
是否可以在表单下拉列表中创建嵌套选项字段,就像创建嵌套的ul列表一样？
由于变化只是美学,是否可以用css做到这一点？
推荐指数
解决办法
查看次数
Bootstrap-Select中的子选项组
以下select代码可以在不使用Bootstrap-Select插件的情况下使用,但在使用时不能:
<div class="container">
<select>
<optgroup label="Group 1">
<optgroup label="Sub Group 1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
</diV>?
如何使用此插件使用子组(嵌套选项组)？
如果我使用嵌套,则不会显示第一个选项组.只有第二个(子)optgroup及其选项.
推荐指数
解决办法
查看次数
Angular Material 嵌套选项组
在阅读了这个 SO question 后，我发现不可能嵌套，optgroups因为它不是 HTML5 规范的一部分。可以自己应用样式，但如果可以在有角度的材料中使用，我宁愿避免这种情况。
“在引擎盖下”角材料为 div 交换了许多元素并应用了自定义样式。这让我觉得他们可能会处理这种情况。
如果我有以下代码，我希望md-optgroupwithlabel="Second level deep"进一步缩进。
<md-input-container>
<md-select ng-model="vm.someModel">
<md-optgroup label="One level deep">
<md-option>
One level deep
</md-option>
</md-optgroup>
<md-optgroup label="Another group">
<md-optgroup label="Second level deep">
<md-option>Two levels deep</md-option>
</md-optgroup>
</md-optgroup>
</md-select>
</md-input-container>
但是，md-optgroups并非所有内容都缩进并显示相同。
这是它目前的样子：
我在演示或文档中看不到任何关于此的内容（实际上他们根本没有任何文档md-optgroup），但文档有时可能已过时/不完整。
是否可以使用不同缩进的嵌套选项组？
如果没有，使用角材料中可用的材料来实现这一目标的最佳方法是什么？我应该使用flex等吗？
我正在努力实现这样的目标：
推荐指数
解决办法
查看次数
如何在不同的浏览器中处理optgroup的不同行为？
我希望能够轻松添加功能，以便能够optgroup直接在select
<select id="MySelect" name="MySelect">
<option value="">Select ...</option>
<optgroup label="Group1" data-id="Group1">
<option selected="selected" value="1">Value 1</option>
<option value="2">Value 2</option>
</optgroup>
<optgroup label="Group2" data-id="Group2">
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</optgroup>
</select>
与配套 jQuery
$("#MySelect").on('click', 'optgroup', function() {
alert($(this).data('id'));
});
和CSS：
#MySelect optgroup {
background-color: orange;
cursor: pointer;
}
然而：
- Chrome 38忽略的
cursorCSSoptgroup，并完全忽略事件点击 - Firefox 32支持
cursorCSS，并直接忽略上的click事件optgroup。 - IE 11会在单击时触发click事件
optgroup，但会data-id报告optgroup最后选择的“选项”的，这将是错误的，除非最后一个子选项在父项下偶然出现optgroup。
在中jQuery 2.1.0，如果单击下方的子选项之一optgroup而不是Chrome ，则IE和FireFox将引发click事件。 …
推荐指数
解决办法
查看次数
我可以这样做,以便无法点击选择中的某些行吗？
我有一个标准类型的选择列表:
<select>
<option value="cars1">Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2">Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
这只是一个例子,但我想做的是将列表中的汽车1和汽车2作为无法选择的标题.
有什么方法可以做到这一点吗？
推荐指数
解决办法
查看次数