Как изменить цвет текста, введенного в поля ввода формы, помещенной в jumbotron

Я новичок в начальной загрузке и поэтому только начинаю возиться с ним.

Итак, я создал форму, которую поместил в 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>
0
0
81
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо, Matheus & gtamorim. Очень признателен.

LJEAN 12.04.2018 06:50

Добро пожаловать, @LJEAN. Это то, чего вы хотели достичь? Если да, не могли бы вы отметить это как ответ?

gtamorim 12.04.2018 10:56

Другие вопросы по теме