Question

我有这个div结构，我想在输入上设置一个CSS类，但它不起作用。

<div class="form-group">
    <label for="tbxName">Name:</label>
    <div class="input-group">
        <i class="input-group-addon fa fa-id-card-o" aria-hidden="true"></i>
        <form:input type="text" path="name" class="form-control errorValidation" id="tbxName" placeholder="Name"></form:input>
    </div>  <!-- .input-group -->
</div> <!-- form-group-->

这是我的风格：

.form-control.errorValidation {
    border-color: 1px solid red;
}

Answer 1

使用此css。

.form-control.errorValidation
{
    border: 1px solid red;
}

<强>已更新使用这个html。

<div class="form-group">
 <label for="tbxName">Name:</label>
 <div class="input-group">
  <i class="input-group-addon fa fa-id-card-o"   aria-hidden="true"></i>
  <input type="text" path="name" class="form-control    errorValidation"  id="tbxName" placeholder="Name">
  </div>  <!-- .input-group -->
</div> <!-- form-group-->

Answer 2

尝试使用输入代码。

   input[type="text"]
 {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 4px;
    border-style: inset;

    border-image: initial;
     border-color: 1px solid red;
}

Answer 3

也许这个例子可以帮助您了解样式以及它们如何级联。看起来您的模板还有更多 - 而且您可能正在使用框架 - 因此您可能需要覆盖主题提供的样式或您正在使用的任何样式。要做到这一点，您必须创建一个更具体的选择器。您可以使用开发人员工具来查看当前选择器的复杂程度......要么创建一个更具体的选择器来覆盖样式......要么修改标记以使用更清晰的类来设置样式。

这就是我接近表格的方式。

https://jsfiddle.net/sheriffderek/at2m1r6v/

标记

<form action='' class='form-name'>

  <ul class='field-list'>

    <li class='field field-name'>
      <label class='input-wrapper' for='input-id-1'>
        <span class='label'>Label 1:</span>
        <input class='input text' type='text' id='input-id-1' placeholder='...'/>
      </label>
    </li>

    <li class='field field-name error'>
      <label class='input-wrapper' for='input-id-2'>
        <span class='label'>Label 2:</span>
        <input class='input text' type='text' id='input-id-2' placeholder='...'/>
      </label>
    </li>

  </ul>

  <input class='submit' type='submit' />

</form>

样式

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.field-list .field {
  margin-bottom: 1rem;
}

.field {
  border: 1px solid red;
  max-width: 300px;
  padding: .3rem;
}

.field .input-wrapper { 
  /* I would just write .input-w */
  display: block; /* <label> is inline be default */
  border: 1px solid blue;
  /* click the label - to see how the input focuses */
  padding: .3rem;
}

.input-wrapper .label, .input-wrapper .input {
  display: block; /* both inline be default */
  width: 100%;
  border: 1px solid green;
}

.input-wrapper .label {
  font-size: 13px;
  margin-bottom: .3rem;
}

.input-wrapper .input.text {
  font-size: 16px;
  padding: .4rem .5rem;
}

.submit {
  margin-top: 1rem;
}

.field.error {
  background: rgba(255,0,0,.3);
}

div上的多个CSS类

3 个答案: