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时没有任何变化。如果我的选择器或错误或我的代码是谁，有人可以帮助我吗？谢谢

P.S下面的测试只是一个例子，如果css在我的编辑器中链接，是的，红色正在执行

Answer 1

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

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

.myclass {
    background-color: red;
}

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

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

那么你想要做的是什么，这是最基本但更好的解决方案，就是在你的form中添加一个类，以便能够指定{{form-control的宽度1}}此形式的元素：

<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，.form-control::-webkit-input-placeholder { color: red; width: 250px; } h1 { color: red; }

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 3

您正在使用Bootstrap，而Bootstrap CSS使用了form-control类。

使用（简易方法）

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

通过Bootstrap CSS覆盖您的代码

最佳做法 -

在你的情况下，类是.form-control（Bootstrap类）要克服这个问题，需要定义新类并为您自己的类添加新的更改。

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

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

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

3 个答案: