入力フィールド内のフォント/テキストを入力フィールド自体とオーバーラップさせることができるかどうか疑問に思っています。2つの入力フィールドを作成して、一方を他方に重ね、もう一方にフィールドボックスを非表示にするなどの操作を行わなくても、これが可能かどうかを知りたいです。
たとえば、手書きのようなフォントがあり、小文字の子孫（たとえば、「p」、「y」、「g」の下部）をフィールドボックスの下にぶら下げるのではなく、フィールドボックスの下にぶら下げたいとします。 -罫線入り用紙に書くときに手書きがベースラインより下に伸びるのと似ています。
私は運が悪かったので大規模な検索を行ったので、誰かが「テキスト重複入力ボックス」や同様の文字列よりも優れた検索用語を知っていたとしても、それ自体が非常に役立ちます。
問題は、入力ボックス内のテキストだけに焦点を当てるCSSセレクターを知らないか、テキストのz-indexを増やして、ボックスの上のレイヤーに配置しようとすることです。
入力要素に背景画像を設定してみましたか？背景画像が線である可能性があります。
すなわち
input {
background: url(path/to/image.png) repeat-x;
}
編集：
私はこれを簡単に試してみましたが、ここで何かを実行しています：http: //jsfiddle.net/qUc9Y/
入力を別の要素（fieldset.input-wrapper）でラップし、CSSトランジションをこの新しい要素に移動しました。入力を比較的10px押し下げたので、コンテナによって作成された影からはみ出します。入力の背景を透明に設定して、.input-wrapperのボックスの影が透けて見えるようにしました。
最後に、入力がホバーされたときにcss遷移が新しい.input-wrapperコンテナー（つまり、入力の親）に適用されるように、いくつかの簡単なjQueryを追加しました。フォーカス/ブラーについても同じことができるはずです。
これがお役に立てば幸いです。
編集2：
これでフォーカス状態も機能するはずです。http：//jsfiddle.net/yZ3uw/14/を参照してください。