Input background color ugliness (jqueryui theme)

Input background color ugliness (jqueryui theme)

tschqrtschqr Posts: 2Questions: 0Answers: 0

example

https://jsfiddle.net/ncxam8zo/

Apparently related to this commit:

cf5a389cc305e267d1295027b1bc9406a44b058c Fix - CSS: Chrome 83 introduced some really ugly defaults for input elements, so we've had to add some custom styling to tone it down a bit.

Toning it down meant making inputs have background-color:transparent which looks bad when the background of the parent element isn't very light. Wouldn't white be better than transparent? Is it still necessary at all, with Chrome 83 so far in the past?

Replies

  • allanallan Posts: 61,734Questions: 1Answers: 10,110 Site admin

    I think for themes like that, it might be best to add a little bit of custom CSS such as

    div.dataTables_wrapper input,
    div.dataTables_wrapper select {
      color: white;
    }
    

    https://jsfiddle.net/CloudTables/tqdvfuwc/1/

    We generally target Smoothness for jQuery UI. Perhaps we should default it to white for jQuery UI - feedback welcome.

    Allan

  • tschqrtschqr Posts: 2Questions: 0Answers: 0

    I ended up using this:

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
      background-color: white;
    }
    

    The simpler selector wasn't specific enough to override the transparent rule.

This discussion has been closed.