Setting the background of an input element as a combination of three colors

Question

I know that there is a solution based on the use of images, but I would still like to explore other alternatives.

Imagine you have a numeric input element that can accept any value, but legal values are confined between MIN and MAX.

Now, the background of the element should reflect the validity of the entered value. For instance:

Legal Value:

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

Above Max:

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

Below Min:

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

One additional option would be not to use three colors but gradients with color switch at different highs within the element.

Is this possible at all using css?

Edit

Though the answer posted by Paige Meinke does basically work, it looks that either I'm doing something wrong or it does now work when combined with AngularJS.

When MIN/MAX values for a numeric element are set, AngularJS automatically adds the classes ng-invalid-min or ng-invalid-max when the entered value exceeds the pre-defined MAX/MIN.

So, I added the following piece to the page:

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

and still, when a value below the minimum is entered, no color changes take place.

Am I doing something wrong or the combination with AngularJS/Bootstrap creates conflicts in this particular case?

Edit 2

Using the great suggestion posted by Paige (see below), I finally got it working the way I wanted. Here is the css + html that do the job:

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

Many thank to Paige for showing me the light!!!!

Answer 1

I would use gradients, colorzilla.com is a great gradient creator. You can drag the nodes to be closer together to make it look like a solid black line in the middle instead of a gradient.

/* 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 */
}

<input type="number">