如何更改输入到放置在 jumbotron 中的表单的输入字段中的文本颜色

Question

我是 bootstrap 的新手，所以刚开始使用它。

所以我创建了一个表格，我将其放置在 Jumbotron 中，如下所示；
我想更改输入文本颜色而不是 Jumbotron 内的标签颜色。

jumbotron {
  background-color: #8A2BE2;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<form action="" method="POST">
  Username: <input type="text" color="red" name="username" /> 
  Password: <input type="password" name="password" /> 
  Colour: <input type="text" name="colour" /> 
  Animal: <input type="text" name="animal" />
  <!--<a href="#" class="btn btn-default btn-lg" 
        role="button">Login</button>-->
  <button type="submit" class="btn btn-danger"role="button">Login</button>
  <!-- <input type="submit " value="Login " /> -->
</form>

Answer 1

您只需要将更具体的选择器应用于样式中的输入即可。

.jumbotron input {
    color: red;
}

如果这在您的页面中全局适用，您只需添加：

input, select, textarea{
    color: red;
}

您甚至可以使用以下方法更改占位符：

::placeholder { 
    color: red;
    opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
    .jumbotron input{
       color: red;
       display: block; /* Just so it looks better */
    }
</style>

<div class="jumbotron">
    <h1>Bootstrap Jumbotron</h1>
    <form action="" method="POST">
        Username<input type="text" color="red" name="username" />
        Password<input type="password" name="password" /> 
        Colour<input type="color" name="colour" value="#ff0000">
        Animal<input type="text" name="animal" />
        <button type="submit" class="btn btn-danger" role="button">Login</button>
    </form>
</div>

如何更改输入到放置在 jumbotron 中的表单的输入字段中的文本颜色

how to change Text color entered into input fields of a form placed in jumbotron

textinput

twitter-bootstrap