Установка фона входного элемента в качестве комбинации трех цветов ⇐ CSS

[Anonymous]

Я знаю, что существует решение, основанное на использовании изображений, но я все равно хотел бы изучить другие альтернативы. < /p>
Представьте , но юридические значения ограничены между минимальным и максимум. Например:
Legal Value :

Код: Выделить всё

  +---------------------------------+
|                                 |
|                                 |
|      [green background]         |
|                                 |
|                                 |
+---------------------------------+

выше max :

Код: Выделить всё

  +---------------------------------+
|                                 |
|       [red background]          |
|                                 |
|------- [black line] ------------|
|      [green background]         |
+---------------------------------+

ниже min :

Код: Выделить всё

  +---------------------------------+
|      [green background]         |
|------- [black line] ------------|
|                                 |
|       [red background]          |
|                                 |
+---------------------------------+
< /code>
Одна дополнительная опция - не использовать три цвета, а градиенты с цветовым переключателем на разных максимумах в элементе. [b] css [/b]? Делать что-то не так или теперь работает в сочетании с AngularJs. или ng-invalid-max 

Когда введенное значение превышает предварительно определенную максимальную/мин.
Итак, я добавил следующую часть на страницу: < Br />

Код: Выделить всё

    
.ng-invalid-min {
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient(top, #ff3232 45%, #ff3232 45%, #000000 50%, #80ed94 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3232 45%,#ff3232 45%,#000000 50%,#80ed94 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3232 45%,#ff3232 45%,#000000 50%,#80ed94 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

< /code>
и все же, когда вводится значение ниже минимума, изменения цвета не происходит. /Bootstrap создает конфликты в этом конкретном случае? Как я хотел. Вот CSS + HTML, который выполняет задание: < /p>
    
.ng-invalid-max {
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient   (      top, #ff3232 80%,#ff3232 80%,#000000 80%,#80ed94 20%); /* FF3.6-15 */
background: -webkit-linear-gradient(      top, #ff3232 80%,#ff3232 80%,#000000 80%,#80ed94 20%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient        (to bottom, #ff3232 80%,#ff3232 80%,#000000 80%,#80ed94 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white ;
}
.ng-invalid-min {
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient   (      top, #80ed94 20%,#80ed94 20%,#000000 20%,#ff3232 20%); /* FF3.6-15 */
background: -webkit-linear-gradient(      top, #80ed94 20%,#80ed94 20%,#000000 20%,#ff3232 20%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient        (to bottom, #80ed94 20%,#80ed94 20%,#000000 20%,#ff3232 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white ;
}

Многие благодарят Пейдж за показание мне свет !!!!

Подробнее здесь: https://stackoverflow.com/questions/445 ... ree-colors