SoFunction
Updated on 2025-02-28

Modify the default font color of input and select through js

Textarea default word color and the color of the word after obtaining the focus. After obtaining the focus, the default disappears after obtaining the focus.

&lt;textarea cols="50" rows="5"  onfocus="if(value=='Get the element focus'){value='';('textarea').='#000'}" onblur="if (value ==''){value='Element focus disappears';('textarea').='#999'}">Enter what you want to enter</textarea>

Select default selected item color is gray, and it becomes black after selection (js implementation)

<script>
var unSelected = "#999";
var selected = "#333";
$(function () {
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find('option:first').val()) {
$(this).css("color", unSelected);
} else {
$(this).css("color", selected);
}
});
})

</script>

Input has a default value and is gray. After clicking, the default value disappears and the input value becomes black

&lt;script type="text/javascript"&gt;

$(function() {
  //The collective call input of type text is input  $(".form input[text]").each(function(){
    $(this).setDefauleValue();
  });
  //Single call  $("#key").setDefauleValue();
})
 
//Set the default value$. = function() {
  var defauleValue = $(this).val();
  $(this).val(defauleValue).css("color","#eee");
 
  return (function() {   
    $(this).focus(function() {
      if ($(this).val() == defauleValue) {
        $(this).val("").css("color","#000");//Input the color of the value      }
    }).blur(function() {
      if ($(this).val() == "") {
        $(this).val(defauleValue).css("color","#999");//Default value color      }
    });
  });
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;form class="form"&gt;
 &lt;input type="text" size="30" value="Enter an account"&gt;
 &lt;br&gt;
 &lt;input type="text" size="30" value="Enter Password"&gt;
&lt;/form&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;input type="text" size="30"  value="Enter your phone number"&gt;