私はGoogleの周りを見てきましたが、選択したテキストの背景の高さを上げるCSS方法が見つかりませんでした。選択したテキストの背景の高さを上げる方法は?
例えばAtomのエディタで選択したテキストの背景が右よりも著しく高くなっている:アトムはHTML/CSSで作られているので
、CSSの組み合わせがありますかしらこの結果を達成することができますか?
私はGoogleの周りを見てきましたが、選択したテキストの背景の高さを上げるCSS方法が見つかりませんでした。選択したテキストの背景の高さを上げる方法は?
例えばAtomのエディタで選択したテキストの背景が右よりも著しく高くなっている:アトムはHTML/CSSで作られているので
、CSSの組み合わせがありますかしらこの結果を達成することができますか?
これは少しハックですが、あなたは、行の高さの錯覚を作成するために、改行なしスペースといくつかのパディングの内容を持つ擬似要素(::before
のような)を使用して、それを行うことができます:
body {
background: #000;
color: #FFF;
}
::selection {
background: red;
}
p::before {
content: "\00a0";
padding: 10px 0;
display: inline-block;
}
This is default text
<p>This text has a pseudo element</p>
jsFiddle:https://jsfiddle.net/azizn/8bmj4dm1/
警告:これは、タグ内の各ラインを包む必要になります。おそらくJavaScriptを使用して、複数行のコンテンツで動作するようにタグ内の各行を自動的に折り返すことができます。
OPの実際の使用事例はわかりませんが、テキストが複数の行にまたがっていると、これは失敗します。 – Harry
@Azizハッキーですが、天才です。ありがとう! – alexchenco
@ハリー私のアプリでは、各行が 'p'なので大丈夫だと思いますか? – alexchenco
パディングとラインハイトを見ましたか? – wizzardmr42
おそらくelement:focusプロパティを試してから、より高いフォントサイズを設定することができます。なぜなら、私たちは内容に集中していると思うからです。 –
@ wizzardmr42はい、私は両方を試しましたが、選択したテキストのサイズは増加しません。 – alexchenco