background-clip: textの部位を選択しているときも色をつけたい

Question

前提・実現したいこと

background-clip: textを使用しているためか、文字を選択しているときに、::selection で指定した背景色と文字色が同じになってしまう。それを解決したい。

該当のソースコード

<div class="tt">
   <div>
      <p>xxx</p>
      <p>xxx</p>
   </div>
</div>

::selection {
      background: red;
      color: #fff;
    }
    ::-moz-selection {
      background: red;
      color: #fff;
    }
.tt div {
      text-align: center;
      display: inline-block;
      background-clip: border-box;
      background: linear-gradient(to bottom, #364954 0%, #364954 20%, #89394B 50%, #4E6675 80%, #4E6675 100%);
      background: -webkit-linear-gradient(to bottom, #364954 0%, #364954 20%, #89394B 50%, #4E6675 80%, #4E6675 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

試したこと

var tp = $('.tt p');
    tp.each(function () {
      $(this).on('mouseup', function(e){  //mouseupでイベント発火
        var selectedStr;
        if(window.getSelection){  //selectionオブジェクト取得
          selectedStr = window.getSelection().toString();  //文章取得
          if(selectedStr !== '' && selectedStr !== '\n'){  //文章チェック
            console.log(selectedStr);
            $(this).parent('div').addClass('t');
          } else {
            $(this).parent('div').removeClass('t');
          }
        }
      });
    });

.tt .t {
      background-clip: inherit;
      background: none;
      -webkit-background-clip: none;
      -webkit-text-fill-color: #fff;
    }

思っていたのと違ったので断念しました。

補足情報（FW/ツールのバージョンなど）

Fire fox 最新、Safari 604.1

Answer 1

こうするとどうでしょうか。

::selection {
      background: red;
      color: #fff;
      -webkit-text-fill-color: #fff;
}

Comments

[erp]

ありがとうございます！　思ったようにできました。

[Lhankor_Mhy]

お役に立てたようで何よりです。