我的表单控件 CSS 选择器不起作用

Question

div class="container">
  <div class="row">
     <div class="col-md-6">
    <form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
       <div class="well">
          <div class="form-group col-sm-12">
               <label class="Control-label col-sm-4" id=""> Email:</label>
               <label class="Control-label col-sm-4" id=""> Username:</label>
               <label class="Control-label col-sm-4" id=""> Password:</label>
          </div>
        <div class="row">
          <div class="form-group ">
              <div class="input-group col-sm-12">
                      <div class="col-sm-4">
                          <input  class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
                      </div>
                      <div class="col-sm-4">
                          <input  class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
                      </div>
                       <div class="col-sm-4">
                          <input  class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
                      </div>
                  </div>
              </div>
              <h1> Test </h1>
          </div>
        </div>
       </form>
    </div>
 </div>

我的CSS代码是：

.form-control{
width: 150px;
}
h1{
color:red;
}

美好的一天伙计，我只是困惑我是否做对了。 我想调整我的网站上定义为类"表单控件"的输入大小，但是当我执行上面的 CSS 时，没有任何变化。 如果我的选择器或错误或我的代码是，有人可以帮助我吗？ 谢谢

附言下面的测试只是一个 xample 如果 css 在我的编辑器中链接并且是的，正在执行红色

Answer 1

选择器越具体，它的优先级就越高。例如：

.mydiv .myclass {
    background-color: blue;
}
.myclass {
    background-color: red;
}

即使红色背景是在蓝色背景之后定义的，第一个在它所应用的类中更具体，如果您有以下代码，则将应用蓝色背景：

<div class="mydiv">
    <div class="myclass">
    </div>
</div>

因此，在您的情况下，这是最基本但仍然是更好的解决方案，您要做的是向form添加一个类，以便能够为此表单指定form-control元素的宽度：

<form class="form-inline cool-form">
    <div class="well">
        <div class="form-group ">
          <div class="input-group col-sm-12">
            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
            </div>
            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
            </div>
            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
            </div>
          </div>
        </div>
    </div>
</form>

然后在 css 中指定宽度：

.cool-form .form-control {
    width: 250px;
}

Answer 2

试试这个：

注意： 并且您缺少关闭第一个div，即<div class="container">

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
        <div class="well">
          <div class="form-group col-sm-12">
            <label class="Control-label col-sm-4" id="">Email:</label>
            <label class="Control-label col-sm-4" id="">Username:</label>
            <label class="Control-label col-sm-4" id="">Password:</label>
          </div>
          <div class="row">
            <div class="form-group ">
              <div class="input-group col-sm-12">
                <div class="col-sm-4">
                  <input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
                </div>
                <div class="col-sm-4">
                  <input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
                </div>
                <div class="col-sm-4">
                  <input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
                </div>
              </div>
            </div>
            <h1> Test </h1>
          </div>
        </div>
      </form>
    </div>
  </div>

Answer 3

您正在使用 Bootstrap，

并且form-control类是从 Bootstrap CSS 中使用的。

使用（简单方法）

.form-control{
      width: 150px !important;
}

通过引导 CSS 覆盖您的代码

最佳实践 -

在您的情况下，类是.form-control（引导类）要克服这一点，需要定义新类并向自己的类添加新更改。

  .form-control-override{
          width: 150px;
    }

并在 HTML 代码中使用此form-control-override而不是form-control