CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSScaret-colorでカーソルの色を変更する

挿入カレットの色を変更するには、CSScaret-colorプロパティ 使用されます。

例

次の例は、CSSのcaret-colorプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
form {
   padding: 2%;
   margin: 2%;
   text-align: center;
}
form:focus-within {
   box-shadow: 0 0 10px rgba(0,0,0,0.6);
   background-color: beige;
}
input {
   font-size: 3em;
   caret-color: chartreuse;
   margin: 2%;
}
</style>
</head>
<body>
<form>
<input value="Check the caret color!" />
<button>Hit!</button>
</form>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSScaret-colorでカーソルの色を変更する

例

<!DOCTYPE html>
<html>
<head>
<style>
form {
   padding: 2%;
   margin: 2%;
   background-color: thistle;
}
form:focus-within {
   box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
textarea {
   caret-color: transparent;
}
</style>
</head>
<body>
<form>
<input type="radio" />1
<input type="radio" />2
<textarea placeholder="Invisible"></textarea>
</form>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSScaret-colorでカーソルの色を変更する


  1. CSSでスタックフォームを作成するにはどうすればよいですか？

    以下は、CSS-を使用してスタックフォームを作成するためのコードです。 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {    font-family: Arial, Helvetica, sans-serif;    font-size: 20px; } h1{  

  2. CSSでプレースホルダー属性の色を変更するにはどうすればよいですか？

    CSSでプレースホルダー属性の色を変更するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, s