Instant icon color change

Question

The page has more than one textbox. Each TextBox has an icon next to it. If the textbox is full, the icon is gray, but if it is blank, keep it in color. How can I do this with Jquery?

$(".my-input").each(function () {                  
    var txtvalue = $(this).val();
    if (txtvalue==" ") {
        //I don't know how to change the color 
    } else { }
        //I don't know how to change the color
});

Answer 1

https://jsfiddle.net/FllnAngl/ps02f00k/3/

I made it so that it changes after you press a button, or would you rather have an instant change as soon as the input has a value?

---

EDIT

https://jsfiddle.net/FllnAngl/ps02f00k/4/

Here's a fiddle with a live check if the input field has a value or not, if the input has a value: the div square turns gray. If it doesn't have a value: the div square turns yellow

---

EDIT 2

https://jsfiddle.net/FllnAngl/45xyomdh/2/

Here's a fiddle with an arrow shaped div that changes colors as soon as there's something in the input field

/*if input is full, make yellow arrow gray*/
$('.input1').on('keyup', function() {
  var value = $('.input1').val();

  if (value === "") {
    $('.arrow_box').css('border', '4px solid rgba(255, 225, 0, 1)');
    $('.arrow_box').removeClass('aftertoggle');
    $('.arrow_box').removeClass('beforetoggle');
  } else {
    $('.arrow_box').css('border', '4px solid rgb(128,128,128)');
    $('.arrow_box').addClass('aftertoggle');
    $('.arrow_box').addClass('beforetoggle');
  }
})

.square {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 10px;
}

.input1 {
  height: 19px;
  margin-left: 15px;
}

.arrow_box {
  position: relative;
  background: #88b7d5;
  border: 4px solid rgba(255, 225, 0, 1);
}

.arrow_box:after,
.arrow_box:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-left-color: rgba(255, 225, 0, 1);
  border-width: 10px;
  margin-top: -10px;
}

.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-left-color: rgba(255, 225, 0, 1);
  border-width: 12px;
  margin-top: -12px;
}

.aftertoggle:after {
  border-color: rgba(136, 183, 213, 0) !important;
  border-left-color: rgb(128, 128, 128) !important;
  border-width: 10px;
  margin-top: -10px;
}

.beforetoggle:before {
  border-color: rgba(194, 225, 245, 0) !important;
  border-left-color: rgb(128, 128, 128) !important;
  border-width: 12px;
  margin-top: -12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
  <div class="arrow_box">
  </div>
</div>
<input type="text" class="input1" placeholder="Type something! :)" />

Answer 2

Since your question is not having any color specifications. I assume it as generic one. There are 3 approaches for your scenario

1.You need to use different images and load it conditionally.

2.Use transparent image like png or svg and add background color conditionally.

3.Use filter properties of CSS3

Hope it helps