个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在自定义 Bootstrap 组件 - 包括 CSS 和 Javascript - 以实现主题化。这是必要的，因为我的主题是可逆的；我想确保每个 Bootstrap 组件的每个状态都可以反转，以便可以访问和阅读。我已经为大多数组件做到了这一点，但我在设置多选控件的样式时遇到了问题。我已经从我的测试页面中包含了一些其他控件，以便您可以看到我的目标；我希望多选控件的文本颜色与文本、日期和其他控件的颜色相同。如果您想在上下文中查看整个页面，请查看我的 Bootstrap Test Page .当我检查 Chrome 中的元素时，它说选项的颜色是“graytext”——显然是 Chrome 的默认设置。为什么我的 CSS 没有覆盖它？
我还有一个与此相关的问题；为什么 Bootstrap 将 :disabled 选择器括在方括号中？即 select[disabled] { ... }。我都尝试过为多选控件设置样式。
/* Bootstrap Form Controls */
.form-control {
background-color: hsl(240, 100%, 95%);
border-color: hsl(240, 100%, 25%);
color: hsl(240, 100%, 40%);
}
.form-control:focus {
background-color: white;
color: black;
}
.form-control[disabled],
fieldset[disabled] .form-control,
fieldset[disabled]>select[multiple] .form-control,
textarea:disabled .form-control,
select[disabled] .form-control,
select[multiple] option:disabled .form-control {
-webkit-appearance: none;
background-color: hsl(240, 100%, 93%);
color: hsl(240, 100%, 80%);
}
.form-control[disabled]::-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]::-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]:-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]:-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]:-ms-input-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]:-ms-input-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]::-webkit-input-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control[disabled]::-webkit-input-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control::-moz-placeholder {
color: hsl(240, 100%, 40%);
}
.form-control:focus::-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control:-moz-placeholder {
color: hsl(240, 100%, 40%);
}
.form-control:focus:-moz-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control:-ms-input-placeholder {
color: hsl(240, 100%, 40%);
}
.form-control:focus:-ms-input-placeholder {
color: hsl(240, 100%, 80%);
}
.form-control::-webkit-input-placeholder {
color: hsl(240, 100%, 40%);
}
.form-control:focus::-webkit-input-placeholder {
color: hsl(240, 100%, 80%);
}
select[multiple].form-control {
border-radius: 10px;
}
.input,
.form-control,
.btn,
.btn+.dropdown-menu {
font-size: 18pt;
}<!DOCTYPE html>
<html lang=en>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
font-size: 18pt;
}
</style>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Disabled Controls</h3>
<fieldset disabled>
<div class="form-group">
<div class="form-group">
<label for="TB_DisabledTextSample">Text Example</label>
<input type="text" class="form-control input-lg" id="TB_DisabledTextExample" placeholder="AaBbCcDdEeFfGg" disabled>
</div>
<div class="form-group">
<label for="TB_DisabledDateSample">Date Example</label>
<input type="date" class="form-control input-lg" id="TB_DisabledDateExample" disabled>
</div>
<div class="form-group">
<label for="DDL_DisabledMultiSelectSample">Multiple Select Example</label>
<select multiple id="DDL_DisabledMultiSelectSample" class="form-control input-lg" disabled>
<option>Coke</option>
<option>Dr. Pepper</option>
<option>Mt. Dew</option>
<option>Pepsi</option>
<option>Root Beer</option>
<option>Sprite</option>
</select>
</div>
</fieldset>
</body>
</html>最佳答案
问题出在这一行:select[multiple] option:disabled .form-control {
此选择器转换为“具有 form-control 类的元素，其父元素是一个 option，其伪选择器为 disabled谁的父级是 select，属性为 multiple。
你想要的是“具有multiple属性的select元素，伪选择器disabled和一类form -control。这将变为 select.form-control[multiple]:disabled。
选择器中添加的空格表示您要选择该元素的子元素。这是everything you can do with CSS selectors的简介.相关的是element,element, element element 和element>element。
要回答您的第二个问题，:disabled 选择被禁用的元素。 [disabled] 选择具有属性 disabled 的元素。但是，要禁用元素，您需要使用disabled 属性。因此，它们实际上是相同的。我得到了一切吗？
关于html - 样式禁用 <select multiple> 控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45262857/
24
4
0
在 的 React 组件中菜单，我需要设置selected反射(reflect)应用程序状态的选项的属性。 在 render() , optionState从状态所有者传递给 SortMenu 组件
我是初级 Ruby-mysql 程序员，我想知道如何使我的(存储过程)查询结果更快.. 这是我的存储过程我正在使用 SQL_CACHE.. 但我不确定.. 缓存使我的过程更快.. : ( DROP
我一直在 Python 中进行套接字编程，以使用 select.select(rfile, wfile, xlist[, timeout]) 处理由已连接的客户端套接字列表发出的请求，并且我还想用 J
我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选
我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。 我有几个选择框。所选值
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
预选 的最佳做法是什么？在 ？ 根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案 如果您正在编写 XHTML，则 selected="selected" 是必需的。 如
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
我在 jqGrid 中有几列 edittype="select"。如何读取特定行中当前选定值的选项值？ 例如:当我提供以下选项时，如何获得 FedEx 等的“FE” editoption: { val
这是我更大问题的精简查询，但要点是我试图内部联接到一个选择，其中选择受到外部选择的限制。那可能吗？我在内部选择上收到有关多部分标识符 S.Item 和 S.SerialNum 的错误。 要点是这样的，
如果chat.chat_type IS NULL，我想选择user.*，但如果chat.chat_type = 1 我想选择组。* SELECT CASE WHEN ch
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用
你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就
我是一名优秀的程序员,十分优秀！