如果输入被禁用并且无法使其用于文本输入,我希望我的表单元素的标签显示为灰色.我尝试过以下方法:
input:disabled {
background:#dddddd;
}
input:disabled+label{color:#ccc;}
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Run Code Online (Sandbox Code Playgroud)
样式适用于复选框标签,但不适用于文本标签.复选框是唯一可以让您通过css设置标签样式的输入类型吗?
我用Firefox测试.
我们有两个带内容的div和第三个div,它是具有绝对位置的背景.
Container是一个flexbox.
一切都在Chrome和Safari中运行良好,但Firefox和 IE11在绝对定位div中起作用,并在div之间分配空间,就像连续有3个div一样.
我做了jsfiddle的例子.有没有办法解决这个错误? https://jsfiddle.net/s18do03e/2/
div.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
justify-content: space-between;
width: 100%;
outline: 1px solid;
}
div.c1 {
background: #aaeecc;
width: 100px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.c2 {
background: #cceeaa;
width: 200px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.bg {
background: #ccc;
width: 100%;
height: 100%;
z-index: 0;
left: 0px;
top: 0px;
position: absolute;
display: flex;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="c1">Content 1</div>
<div …Run Code Online (Sandbox Code Playgroud)我有一个像这样的HTML列表:
<ul>
<li class="heading">Heading 1</li>
<li class="heading">Heading 2</li>
<li>Text Under Heading 2</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
由于标题1下没有文本,我想用CSS隐藏它.
如果我这样做,
li.heading + li.heading { display: none; }
Run Code Online (Sandbox Code Playgroud)
它隐藏标题2而不是标题1.
如何隐藏标题1?有没有办法寻找相邻的兄弟姐妹并选择第一个?
考虑以下html:
<div>
<div class="iwant" />
<div class="idontwant" />
</div>
<div>
<div class="iwant" />
</div>
Run Code Online (Sandbox Code Playgroud)
我对一个选择器(用于抓取内容,因此我无法修改html)感兴趣,它将选择所有iwant不具有类的兄弟idontwant.
可能重复:
CSS上一个兄弟选择器
如何使用选择器在CSS中选择元素的上述元素
<li class="content">One</li>
<li class="content">Two</li>
<li class="content">Three</li>
<li class="no-content">First</li>
<li class="content">Four</li>
<li class="content">Five</li>
<li class="content">Six</li>
Run Code Online (Sandbox Code Playgroud)
在这里,我想使用该类no-content,以便我可以<li class="content">Three</li>使用CSS选择器获取其上面的元素.
我有能够反映不同的状态的元件,或者由用户(触发:hover,:focus等)或由服务器操作(data-status="finished",disabled等).
我可以定位具有已更改状态的元素,但我似乎找不到基于所讨论元素的状态来定位DOM中的其他元素的方法.
例:
<section>
<div>Element 1</div>
<div data-status="finished">Element 2</div>
<div>Element 3</div>
</section>
<section>
<div>Element 4</div>
<div class="blink">Element 5</div>
<div>Element 4</div>
<div>Element 4</div>
<div class="spin">Element 4</div>
...
</section>
Run Code Online (Sandbox Code Playgroud)
或者只是使用服务器端的正确样式呈现元素.
是否有一个CSS选择器可以让我根据目标元素的状态指定应该选择哪些元素?
就像是:
div[data-status~=finished]:affect(.blink, .spin)
Run Code Online (Sandbox Code Playgroud)
这将允许我也只针对 CSS 没有相同父级的元素?
是否有可能在CSS2中获取有序列表的第n个元素?
(类似于:nth-child()CSS3)
仅供参考:我正在尝试将德国版Parcheesi编程为XHTML 1.1和CSS2兼容并尝试使用有序列表生成播放场,因此移动选项由数据结构预先确定.为了围绕中心定位,我想按编号选择列表元素.
我有以下HTML结构:
<div>
<h2>Candy jelly-o jelly beans gummies lollipop</h2>
<p>
Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
</p>
<p>
Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu.
</p>
<h2>Dessert pie cake</h2>
<ul>
<li>liquorice</li>
<li>powder</li>
<li>dessert</li>
</ul>
<h2>Chupa chups sweet dragée</h2>
<p>
Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. …Run Code Online (Sandbox Code Playgroud) 我想做一个星级控制,但我似乎无法找到一种方法来选择悬停时所有以前的兄弟姐妹。这种东西是否存在或者我必须使用javascript?
span {
display:inline-block;
width: 32px;
height: 32px;
background-color:#eee;
}
span:hover {
background-color:red;
}Run Code Online (Sandbox Code Playgroud)
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>Run Code Online (Sandbox Code Playgroud)
有没有办法在使用Bootstrap和Jquery禁用复选框后禁用复选框标签并将其灰显?
<div class="checkbox">
<input id="accept" name="accept" type="checkbox" value="True">
<label for="accept" class="control-label">Incremental</label>
</div>
Run Code Online (Sandbox Code Playgroud)
我现在使用波纹管代码禁用复选框:
$("#accept").prop("disabled", true);
Run Code Online (Sandbox Code Playgroud)