Firefox fails to apply styles to elements that are empty

Question

Firefox fails to apply styles to elements that are empty

Below is a snippet of code for a table with editable content:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 3px 6px;
}

[contenteditable]:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true" data-placeholder="Firstname"></td>
      <td contenteditable="true" data-placeholder="Lastname"></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

This code works well in Chrome and Safari.

In Firefox, there seems to be an issue with displaying the placeholders in contenteditable cells:

To resolve this problem, consider modifying the CSS like below:

[contenteditable]:not(:focus)::before {
    content: attr(data-placeholder);
    color: gray;
    font-size: .9rem;
}

However, this modification would always display the placeholder text which may not be ideal. Are there any other solutions?

css firefox contenteditable

Answer 1

Answer №1

The reason for Firefox's incompatibility with td:empty is not due to an issue with the css engine, but rather because Firefox adds a br tag into the region when handling contenteditable.

https://i.sstatic.net/CXJAO.jpg

To work around this, one alternative approach is to modify the HTML to use inputs that are disabled when content is present.

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
  padding: 0;
}

table input {
  border: none;
}

[placeholder] {
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Forename</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input placeholder="Forename"></td>
      <td><input placeholder="Surname"></td>
    </tr>
    <tr>
      <td><input placeholder="Forename" value="John" disabled></td>
      <td><input placeholder="Forename" value="Doe" disabled></td>
    </tr>
  </tbody>
</table>

Answer 2

The reason for Firefox's incompatibility with td:empty is not due to an issue with the css engine, but rather because Firefox adds a br tag into the region when handling contenteditable.

https://i.sstatic.net/CXJAO.jpg

To work around this, one alternative approach is to modify the HTML to use inputs that are disabled when content is present.

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
  padding: 0;
}

table input {
  border: none;
}

[placeholder] {
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Forename</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input placeholder="Forename"></td>
      <td><input placeholder="Surname"></td>
    </tr>
    <tr>
      <td><input placeholder="Forename" value="John" disabled></td>
      <td><input placeholder="Forename" value="Doe" disabled></td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

According to @DreamTeK, there is a peculiar behavior in Firefox where it adds a <br> tag within empty contenteditable elements. The suggestion provided by DreamTeK to use input instead of contenteditable is indeed valid.

If utilizing contenteditable is necessary, here is a JavaScript fix to eliminate the unwanted br element:

// Pure VanillaJS
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('[contenteditable]').forEach((elt) => {
        if (elt.children.length === 1 && elt.firstChild.tagName === "BR") {
            elt.firstChild.remove();
        }
    })
});

// Using jQuery
/*
$(document).ready(() => {
    $('[contenteditable]').each((_, elt) => {
        if ($(elt).children().length === 1 && $(elt).has('br')) {
            $(elt).html('');
        }
    });
});
*/

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 3px 6px;
}

[contenteditable]:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true" data-placeholder="Firstname"></td>
      <td contenteditable="true" data-placeholder="Lastname"></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Answer 4

According to @DreamTeK, there is a peculiar behavior in Firefox where it adds a <br> tag within empty contenteditable elements. The suggestion provided by DreamTeK to use input instead of contenteditable is indeed valid.

If utilizing contenteditable is necessary, here is a JavaScript fix to eliminate the unwanted br element:

// Pure VanillaJS
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('[contenteditable]').forEach((elt) => {
        if (elt.children.length === 1 && elt.firstChild.tagName === "BR") {
            elt.firstChild.remove();
        }
    })
});

// Using jQuery
/*
$(document).ready(() => {
    $('[contenteditable]').each((_, elt) => {
        if ($(elt).children().length === 1 && $(elt).has('br')) {
            $(elt).html('');
        }
    });
});
*/

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 3px 6px;
}

[contenteditable]:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true" data-placeholder="Firstname"></td>
      <td contenteditable="true" data-placeholder="Lastname"></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Firefox fails to apply styles to elements that are empty

Answer №1

Answer №2

Similar questions

The JavaScript-rendered HTML button is unresponsive

The child elements are stacking vertically despite implementing inline-block

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

How come ng-class doesn't apply to a specific class name?

Size of text Including line breaks

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Attempting to make Navbar vanish as the page size decreases

The issue of border-radius and shadow box inconsistency

What are some ways I can enhance the typography within Material UI?

Tips for formatting div elements to resemble a table layout (see example below in SharePoint)

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Issue with sliding panel not working smoothly in Internet Explorer

IE not rendering 'right' property in jqueryui CSS

Steps to customize the Spark theme in Flex 4

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Can a circular design incorporating an arrow and gradient background be created?

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Grid layout with columns of equal width in Bootstrap

What steps can I take to improve the smoothness of my Slick slider and ensure it functions correctly across all screen widths

CSS navigation issue