Question

我为特定表单的标签设置了以下样式：

#incidentForm label {
    font-weight:bold;
    width:40%;
    vertical-align:top;
}

这正是我想要的整页表格。但是对于允许人们从有人查看数据结果的报告中更新单个字段的模式，我希望TEXTAREA ONLY的标签不限于“width：40％”。所有其他输入类型应保持“宽度：40％”。

我一直试图将我的大脑包围起来：如何做一个：现有标签样式的例外，或者以某种方式根据模态的类设置单独的样式。即：

.updateModal label(that somehow identifies only textareas) {
    width:100%;
}

以下是更新模式本身结构的示例：

<div id="Return" class="updateModal">
  <div id="incidentForm">
    <div class="[name of this incident form type]">
      <form class="AjaxForm" action="https://blahblahblah" method="post">
        <fieldset id="fs1">
          <legend>Edit report field</legend>
          <div class="field">
            <label for="31">This is the label for this text area field:</label>
            <textarea id="31" name="31"></textarea>
          </div>
        </fieldset>
        <input value="Update record" type="submit">
      </form>
    </div>
  </div>
</div>

请注意，textarea的id以及它的标签是根据从中提取表单信息的数据库的id字段动态生成的。所有字段信息都存储在db中，因此我无法根据特定textarea本身的id生成特定的样式定义。或者至少不是我能想到的。

有人有任何建议吗？

非常感谢！

Answer 1

选择器应该像

label[for=xxx]
{
    /* ...definitions here... */
}

对于多个，您可以为现代浏览器选择更简单和概括：

label[for^="3"] {
    color: red; //It will apply to all label that starts with "3"
}

或简单您可以写：

label[for="31"],label[for="32"],label[for="and so on.."] {
    color: red;
}

或者对于一般标签只需编写

label {
    color: red; //It will affect to all the label in the page
}

Answer 2

您可以使用以下内容选择元素的属性：

input[type="text"] {
    background-color: yellow;
}

Answer 3

虽然我没有任何代码可以使用，如果提供一些我尝试包含它，在我看来你应该能够将CSS类添加到正在使用的任何标签对于textarea。如果后端代码使用数据库信息来决定用于表单字段的元素，那么您可以使用该逻辑来添加类，否则在编写HTML时自己添加它。

Answer 4

使用CSS，选择器的主题是整个选择器的最后一个复合选择器（https://www.w3.org/TR/selectors4/#subject）。在CSS4中，有一个新的主题选择器允许这样做。看起来像是：label! + textarea。 !表示label选择器是此选择器的主题。

不幸的是，这还没有在任何浏览器中实现（http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/）。鉴于此，我们只有能力寻找后代，孩子和弟弟妹妹。

如果你有能力控制你的HTML，这给了我们一个可能性：如果我们翻转表单元素和标签的DOM顺序，那么label就会变成textarea的弟弟妹妹。这使我们可以选择使用相邻的+选择器。可以使用反向柱弹性框来改变视觉排序。考虑：

<div class="field">
  <textarea id="f1">My textarea</textarea>
  <label for="f1">My Label</label>
</div>
<div class="field">
  <input type="text">
  <label for="f1">My Label</label>
</div>

.field {
  display: flex;
  flex-direction: column-reverse;
  margin: 1em;
}

textarea + label {
  background: #faa;
}

演示：https://codepen.io/honzie/pen/weMRam

总结：（1）CSS2.1 / 3有可能吗？不是当前的HTML。（2）CSS4是否可能（假设浏览器实现它并且规范没有改变）？是的，将来。

Answer 5

你可以使用jQuery中的兄弟功能轻松实现这一点，如下所示，

<script>
$(document).ready(function(){
   $( "textarea" ).siblings('label').css( "width", "100%" );
});
</script>

此外，请查看此答案，如果有帮助https://stackoverflow.com/a/27993987/4874281

有没有办法将CSS样式设置为特定输入类型的标签？

5 个答案: