How to Select Empty Textareas with CSS

Can I select empty textareas with CSS?

this works in recent browsers except edge (at the moment):

textarea:placeholder-shown {
  /* this should be active only when area is empty and placeholder shown */
}

so with jQuery for example you can pick all empty textareas:

$('textarea:placeholder-shown').val()

https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown

apply styles to empty input/textarea only

From what I can see, :empty is still a working draft and may not be supported by the specific browser you are using.

A quick JavaScript solution would be to add/remove an HTML class based upon whether or not the textarea has a value.

.empty{/*styles go here*/}

And your JavaScript:

textareaElement.addEventListener('input',function(){
    if(this.value && this.classList.contains("empty")) this.classList.remove("empty");
    else this.classList.add("empty");
},false);

More info about Element.classList can be found on MDN.

Is there a way to target all textareas with a value using CSS only?

$('textarea:empty') is a nice way of doing it, but as I am dealing with textareas whose content may constantly change and be empty at one point and non-empty the next, this would still require checking every time the user focuses in and out of the textarea.

I ended up adding a class .empty to my textarea, and checking its value every time .focusout is fired:

$('textarea').focusout(function() {
  if ($(this).val() == '') { $(this).addClass('empty'); }
  else { $(this).removeClass('empty'); }
  });

This way I can keep the styling in my stylesheets and the rules defined by .empty get used even after the user has typed something and decides to delete it all.

Select blank TextArea with value='' selector

Textarea doesn't have a 'value' attribute. Try $("textarea:empty").

Updated to show how it works with jQuery (OP's question), vanilla JS, and CSS.

document.querySelector('textarea:empty').style.width = "300px"
$("textarea:empty").css("background", "blue")

textarea:empty {  border: 3px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><textarea id="empty"></textarea><textarea id="notempty">foo</textarea>

Styling empty textarea height

Most browsers set the default rows of a textarea to 2 rows as you can see here: https://www.w3.org/wiki/HTML/Elements/textarea.

There is no css property to modify the number of rows in a textarea.

What you could do if you really need 1 row is set rows='1' and then use javascript to dynamically add more rows as the user types. You can find an example of that here: add new row to textarea input while editing

how to stop displaying textarea if the previous text area is empty?

Your code is pretty messy. You are using jQuery but not in the jQuery way. It looks like you are mixing vanilla JavaScript and jQuery. Also, you are appending a lot of CSS using jQuery, if you want to style it, style it using CSS. As far as the issue goes, you want to append a new textarea element only if the previous one has few characters in that.

So I've wrote some code from scratch as yours was very messy. Here, before I add a new textarea, I select the last appended textarea using wrapper.find('textarea').last().val().length, if it returns more than 0, it will append a new textarea else it will just ignore.

var wrapper = $('#show-textarea');$('#add-textarea').on('click', function() {  if(wrapper.find('textarea').last().val().length) {    wrapper.append('<textarea></textarea>');  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="show-textarea">  <textarea></textarea></div><input type="button" id="add-textarea" value="Add Textarea">

Add border to Textarea / Input when its empty

You can simply use .css to apply border border, 1px solid red if notes are empty and remove border as well once there is a value.

I have simplified your code as well.

Run snippet below to see it working.

$('#modal_reject').on('click', '#submit', function(event) {
  event.preventDefault();

  //Get the target input
  var notesInput = $("#NOTES_REJECT_SV");

  //Check value
  if (notesInput.val()) {
    //Hide Modal
    $('#modal_reject').modal('hide')
    //Remove border
    $(notesInput).css('border', '1px solid #ced4da'); //Remove border
  } else {
    //Apply Border
    $(notesInput).css('border', '1px solid red'); //Apply border
  }
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group has-error">
          <label class="control-label"> Add Note <span class="text-danger">*</span></label>
          <textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="submit" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

What is the default CSS of a textarea?

You can check default values from browser developer console.
When you click an HTML tag, It will show all applied CSS to your selected element.

Also you can use this link. It has all elements and default styles.

Click

For example, textarea has no default styling on it.

You mentioned log outing your element to console and all values seems empty string. It is because textarea has no default styling on it.

---

Related Topics