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

Question

I am new to bootstrap and so just beginning to mess around with it.

So I have created a form which I have placed inside Jumbotron as follows;
I want to change the input text color but not the label color inside 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

You would just need to apply a more specific selector to your input in your styles.

.jumbotron input {
    color: red;
}

If that applies in globally in your page, you could simply add:

input, select, textarea{
    color: red;
}

You could even change the placeholder by using:

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