HTML入力を色の三角形とテキストでオーバーレイするにはどうすればよいですか？
vy32
次のようなHTMLフォームがあります。
しかし、スペースがあまりないので、入力ボックス内にm：タグとf：タグを入れたいと思います。そして、それらが実際には入力の一部ではないことを示したいので、暗い太字のテキストの後ろに必要な半透明の三角形で部分的に隠して、誰かがより多くのテキストを入力した場合に三角形が表示されないようにします。関連性があり、次のようになります。
最近、Webチェックアウトフォームで人の名前とCCNを要求するこのようなものを目にしました。フィールドに入力を開始すると、凡例のテキストが上下に移動します。
これを行う簡単な方法はありますか？
アフィフに同行
入力要素に単純な背景を使用します。
label {
position:absolute;
}
input {
background:linear-gradient(to top left,transparent 49.5%,rgba(255,0,0,0.5) 50%) left/20px 100% no-repeat;
padding-left:20px;
border:1px solid;
}<div class="box">
<label for="name">m:</label><input id="name" type="text">
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：Spread演算子で他のフィールドを上書きせずに、ネストされたオブジェクトの一部のフィールドを更新する
- 次の投稿：モデル評価：model.score Vs. ROC曲線（AUCインジケーター）
関連記事
Related 関連記事
- 1
テーブルセルの右下に小さな緑色の三角形を追加するにはどうすればよいですか？
- 2
最大三角形パス合計のトレースを取得するにはどうすればよいですか？
- 3
pygameで三角形の中点を見つけて、それを繰り返し実行してシェルピンスキーの三角形を作成するにはどうすればよいですか？
- 4
Primefacesがサブメニューテキストと三角形アイコンの間で折り返されるのを防ぐにはどうすればよいですか？
- 5
フォーカスされたときにEditTextに小さな三角形と背景のハイライト色を作成するにはどうすればよいですか？
- 6
Vuetify v-menuコンポーネントで三角形のポインタを作成するにはどうすればよいですか？
- 7
SQLのストアドプロシージャを使用して星の三角形を作成するにはどうすればよいですか？
- 8
三角形内のスペースをトリミングするにはどうすればよいですか
- 9
UIViewで特定の角度でオープンエンドの三角形を描画するにはどうすればよいですか？
- 10
親divの高さにスケーリングするCSSで三角形を作成するにはどうすればよいですか？
- 11
Rで三角形メッシュをインポートしてプロットするにはどうすればよいですか？
- 12
右の境界線としてレスポンシブ三角形を作成するにはどうすればよいですか？
- 13
下の三角形だけをggpairsで表示するにはどうすればよいですか？
- 14
2の累乗を三角形で印刷するにはどうすればよいですか？
- 15
三角形の内側に境界線を作成するにはどうすればよいですか？
- 16
配列を特定の三角形に印刷するにはどうすればよいですか？
- 17
下部に全幅の三角形を作成するにはどうすればよいですか？
- 18
三角形のQWidgetを作成するにはどうすればよいですか？
- 19
三角形の位置を計算して作成するにはどうすればよいですか？
- 20
正三角形の座標を計算するにはどうすればよいですか？
- 21
正三角形の座標を計算するにはどうすればよいですか？
- 22
ユーザーがこの長方形でどの三角形に触れたかを確認するにはどうすればよいですか？
- 23
三角形の穴パッチをサーフェスメッシュに変換するにはどうすればよいですか？
- 24
線形グラデーションの背景を持つ直角三角形を作成するにはどうすればよいですか？
- 25
Pythonで上三角形と下三角形の2つのベクトルから相関行列を作成するにはどうすればよいですか？
- 26
台形を印刷するためにJavaで三角形を回転、インデント、描画するにはどうすればよいですか？
- 27
境界線と背景プロパティを持つ三角形のdivを作成するにはどうすればよいですか？
- 28
三角形の両側の画像（任意のテクスチャ）を変更するにはどうすればよいですか？
- 29
UWPで三角形ボタンを実行するにはどうすればよいですか？
コメントを追加