web-dev-qa-db-ja.com

CSSで検索バー内のキャレット（点滅カーソル）サイズを調整する方法

私はそれをググってみましたが、驚くほど関連する結果が見つかりませんでした... CSSを使用して検索ボックス内の点滅カーソルをCSSで調整するにはどうすればよいですか？検索ボックスのサイズを調整しましたが、点滅カーソルのサイズは元の小さなテキストサイズのままです。

css3searchbar
23
weia design

「キャレット」はあなたが探している言葉です。ただし、これはブラウザーの設計の一部であり、CSSの理解の範囲内ではないと考えています。

ただし、JavascriptとCSSを使用してキャレットの変更をシミュレートすることについての興味深い記事があります http://www.dynamicdrive.com/forums/showthread.php?t=1745 それは私にとって少しハックのようです、しかしおそらくタスクを達成する唯一の方法です。この記事の主なポイントは次のとおりです。

ビューアーのビュー外の画面のどこかにプレーンテキストエリアがあり、ユーザーが「偽の端末」をクリックすると、テキストエリアにフォーカスし、ユーザーが入力を開始すると、入力したデータをテキストエリアに追加します。私たちの「ターミナル」にそれはそれです。

ここ は実際のデモです。

  1. デモのように、divを使用して検索ボックスを作成し、javascriptを使用して入力からテキストをコピーしてから、キャレット（cssで作成）を追加できます。
  2. ご存知のように、font-sizeはキャレットサイズも変更できます。

以下を使用して、キャレットの色を変更することもできます。

input{
  caret-color:red;
}
<input type="text">
4
Hardik Chaudhary

カーソルの代わりにキャレットを検索すると、より多くの結果が得られます。

どうやら、textareaでは不可能ですが、Javascriptを介して他の要素では可能です：

を見てみましょう：

CSSでカーソル/キャレットのサイズを制御する方法

CSSでキャレットを変更する方法

そして

スタイリングテキスト入力キャレット

3
Andrea Ligios

現在、キャレットをスタイリングする方法はありませんが、別のDOM要素を使用して入力コントロール値を表示すると、できます。 HTML入力フィールドでこの四角いカーソルを使用する方法？ を見てください

sample

2
sarkiroka

あなたのコンテキストでcapsが大丈夫なら、簡単なハックの1つはcss属性font-variantを使用することです：small-caps;テキスト。

別のアプローチは、入力フィールドの置換を使用して独自のキャレットを作成することです。誰かが時間を費やし、 何かを達成しました ですが、著者は標準キャレットを使用し続けることをお勧めします。

1
Digitonaut

キャレットの幅を変更することはできません（少なくとも今のところ）。ただし、最新のブラウザの大部分ではキャレットの色を変更できます

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

input {
 caret-color: red;
 caret-color: #ff0000;
 caret-color: rgb(255, 0, 0);
 caret-color: hsl(0, 97%, 50%);
}
1
Hossein

私が知っているように、キャレットをスタイルする直接的な方法はありません。代わりに、この問題を回避するのに役立つ役立つ情報をいくつか紹介します。

デフォルトでは、キャレットの高さはフォントの高さを取りますが、行の高さを指定すると、この高さを取ります。

そのため、キャレットの高さを変更する場合は、font-sizeを使用するか、フォントサイズを変更しない場合は行の高さを使用します。

0
Oussama Bouthouri