Contrib.social

Seven's Select Formatting Overrides CKEditors

Open on Drupal.org →
Created on 12 November 2015, over 9 years ago
Updated 9 May 2023, about 2 years ago

The following is causing rendering problems on select boxes in CKEditor dialog forms. This was tested on a select. Not sure of problems with other elements, though a quick look through the CSS it appears this might be select only:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1px 1.571em 1px 0.5em; /* LTR */
    border: 1px solid #a6a6a6;
    border-radius: 0.143em;
    background:
      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
    font-size: 0.875rem;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-font-smoothing: antialiased;
  }
  [dir="rtl"] select {
    padding: 1px 0.714em 1px 1.571em;
    background-position: 1% 63%, 0 0;
  }
  select:focus,
  select:hover {
    background-image: url(../../../../misc/icons/333333/caret-down.svg),
    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
    color: #1a1a1a;
  }
  select:hover {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  }
}

When the select element is blurred:

And when focused:

Not sure the best approach to fixing this, short of adding a parent selector on each rule (.cke_dialog_contents). IE:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .cke_dialog_contents select,
  select {
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1px 1.571em 1px 0.5em; /* LTR */
    border: 1px solid #a6a6a6;
    border-radius: 0.143em;
    background:
      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
    font-size: 0.875rem;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-font-smoothing: antialiased;
  }
  [dir="rtl"] select {
    padding: 1px 0.714em 1px 1.571em;
    background-position: 1% 63%, 0 0;
  }

  .cke_dialog_contents select:focus,
  .cke_dialog_contents select:hover,
  select:focus,
  select:hover {
    background-image: url(../../../../misc/icons/333333/caret-down.svg),
    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
    color: #1a1a1a;
  }

  .cke_dialog_contents select:hover,
  select:hover {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  }
}

If this looks acceptable, I can generate a patch when I'm off the Vagrant box.

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇺🇸United States Jamie Holly

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024