2016-08-19 2 views
1

Привет, ребята Я пытаюсь изменить цвет по умолчанию для дизайна материала исходного материала для бутстрапа зеленого цвета для разных цветов, я уже видел решение здесь (https://github.com/FezVrasta/bootstrap-material-design/issues/384), но он, похоже, не работает , Я googled много способов, но не получил решение, я не знаю, что здесь отсутствует, ниже мой пример кода, со всеми необходимыми файлами, которые я пробовал. Все зависимые файлы принимаются только на официальных сайтах.Загрузочный материал дизайн входной тег изменение по умолчанию цвет телята

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Material Design</title> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="bootstrap-material-design.min.css"> 
    <link rel="stylesheet" type="text/css" href="ripples.min.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="well"> 
      <div class="form-group label-floating"> 
       <label class="control-label">Name</label> 
       <input type="text" name="" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 
    <script type="text/javascript" src="material.min.js"></script> 
    <script type="text/javascript" src="ripples.min.js"></script> 
    <script type="text/javascript"> 
     $.material.init() 
    </script> 
</body> 
</html> 

Пожалуйста, ознакомьтесь с этим и предложить мне, если я сделал какую-либо ошибку, или если я пропустил что-нибудь, пожалуйста, дайте мне знать, спасибо заранее.

ответ

2

Для этого вам необходимо перезаписать material styles.

добавить CSS

.form-group.is-focused .form-control{ 
     background-image: linear-gradient(#c22, #c11), linear-gradient(#a43, #a11); 
} 

Если вы хотите дать border по умолчанию (не ориентированные ситуации)

.form-control, .form-group .form-control{ 
    background-image: linear-gradient(#c22, #c11), linear-gradient(#a43, #a11); 
} 

Чтобы изменить цвет этикетки:

.form-group.is-focused label .form-group.is-focused label.control-label{ 
    color: blue; // any color that you want 
} 
+0

Я его отлично работает как мое исключение, спасибо за ваш любезный ответ, но в случае, если у меня есть подтверждение (обязательно), поэтому он должен иметь чтобы показать в красном цвете, в этом случае то, что когда-либо цвет мы дали, тот же цвет отражает только для проверки. '

'. –

+0

1 сек. lemme check –

+0

@AjayKumar Можете ли вы отправить любую ссылку демонстрации, которая показывает эту проверку? –

0

Вот пример с меньшим:

http://codepen.io/mhadaily/pen/PzgWkm

<div class="container"> 
    <div class="well"> 
     <div class="form-group label-floating"> 
      <label class="control-label">Name</label> 
      <input type="text" name="" class="form-control"> 
     </div> 
    </div> 
</div> 

и CSS

@input-success: rgba(0,32,132,0.8); 
@input-underline-color: rgba(123,321,312,0.8); 

.form-group.is-focused .form-control { 
    background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color); 
} 
Смежные вопросы