相关疑难解决方法(0)

如何为禁用的输入设置HTML标签的样式

如果输入被禁用并且无法使其用于文本输入,我希望我的表单元素的标签显示为灰色.我尝试过以下方法:

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)

Js Fiddle

样式适用于复选框标签,但不适用于文本标签.复选框是唯一可以让您通过css设置标签样式的输入类型吗?

我用Firefox测试.

html css

33
推荐指数
2
解决办法
7万
查看次数

在IE11中,不会从正常流程中删除绝对定位的弹性项目

我们有两个带内容的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 css css3 flexbox internet-explorer-11

28
推荐指数
3
解决办法
2万
查看次数

CSS:选择第一个相邻的兄弟

我有一个像这样的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?有没有办法寻找相邻的兄弟姐妹并选择第一个?

css css-selectors

27
推荐指数
4
解决办法
3万
查看次数

CSS没有兄弟选择器

考虑以下html:

<div>
    <div class="iwant" />
    <div class="idontwant" />
</div>
 <div>
    <div class="iwant" />
</div>
Run Code Online (Sandbox Code Playgroud)

我对一个选择器(用于抓取内容,因此我无法修改html)感兴趣,它将选择所有iwant不具有类的兄弟idontwant.

html css css-selectors

24
推荐指数
4
解决办法
2万
查看次数

使用选择器在CSS中选择元素的前一个兄弟

可能重复:
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选择器获取其上面的元素.

css css-selectors css3

21
推荐指数
1
解决办法
5万
查看次数

如何根据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 没有相同父级的元素

css css-selectors css3

20
推荐指数
3
解决办法
9459
查看次数

如何使用CSS2选择器获取元素的第n个子元素?

是否有可能在CSS2中获取有序列表的第n个元素?

(类似于:nth-child()CSS3)


仅供参考:我正在尝试将德国版Parcheesi编程为XHTML 1.1和CSS2兼容并尝试使用有序列表生成播放场,因此移动选项由数据结构预先确定.为了围绕中心定位,我想按编号选择列表元素.

css css-selectors

19
推荐指数
1
解决办法
1万
查看次数

在其他元素之前选择特定元素

我有以下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)

css

19
推荐指数
2
解决办法
7万
查看次数

CSS 选择所有以前的兄弟姐妹以获得星级

我想做一个星级控制,但我似乎无法找到一种方法来选择悬停时所有以前的兄弟姐妹。这种东西是否存在或者我必须使用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)

javascript css

19
推荐指数
3
解决办法
1279
查看次数

在Bootstrap中禁用并灰显复选框标签

有没有办法在使用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)

html javascript checkbox jquery twitter-bootstrap

18
推荐指数
1
解决办法
4万
查看次数