Question

我知道有一个基于图像使用的解决方案，但我仍然想探索其他替代方案。

想象一下，你有一个可以接受任何值的数字输入元素，但合法值被限制在MIN和MAX之间。

现在，元素的背景应该反映输入值的有效性。例如：

法律价值：

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

高于最高：

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

低于最低：

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

另外一个选择是不使用三种颜色，而是在元素内使用不同高度的颜色开关渐变。

这是否可以使用 css ？

感谢。

修改：

尽管Paige Meinke发布的答案确实基本有效，但看起来我做错了，或者当它与AngularJS结合使用时它现在可以正常工作。

当设置数值元素的MIN / MAX值时，当输入的值超过预定义的MAX / MIN时，AngularJS会自动添加类ng-invalid-min或ng-invalid-max。

所以，我在页面中添加了以下内容：

    <style>
        .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+ */
        }
    </style>

然而，当输入低于最小值的值时，不会发生颜色变化。

我做错了什么或者与AngularJS / Bootstrap的组合在这种特殊情况下会产生冲突吗？

再次感谢。

编辑2

使用Paige发布的伟大建议（见下文），我终于以我想要的方式工作了。这是完成工作的css + html：

    <style>
        .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 ;
        }            


    </style>

        <input type="number" 
               ng-model="Test_Number" 
               id="Test_Number" 
               name="Test_Number" 
               min="10" 
               max="100"
               style="position:relative;margin:30px">

非常感谢Paige 向我展示了光明!!!!

Answer 1

我会使用渐变色，colorzilla.com是一个伟大的渐变创作者。您可以将节点拖动到更近的位置，使其看起来像中间的黑色实线而不是渐变。

＆＃13;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3232+45,ff3232+45,000000+50,80ed94+50 */
input{
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+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#80ed94',GradientType=0 ); /* IE6-9 */
}

＆＃13;

<input type="number">

＆＃13;

Answer 2

以下是CSS的代码：

.two-colour-background {
    width: 100px;
    height: 100px;
    background: -webkit-linear-gradient(top, yellow, yellow 30%, white 30%, white);
    border: solid 10px #000;
}

您可以在此处操作CSS：http://jsfiddle.net/UES6U/2/

css - 将输入元素的背景设置为三种颜色的组合

2 个答案: