css - HTMLフォーム入力を画像の上に置く

Question

私は現在、css によって設定された青い背景を持つテキスト入力を持つ単純なフォームを持っています。それはすべて完璧に動作し、Firefox や ie では見栄えがしますが、iPhone やサファリではうまくいきませんか? 背景ではなく入力の後ろに画像があるようにするにはどうすればよいですか? 入力の両端に他の画像があることに注意してください。http://stack.uk.toを参照してください。

Answer 1

私が見る唯一の問題は、入力の CSSheightが48px. その隣にあるあなたの画像は50pxにありheightます。inputの高さをに変える50pxと合いそうです。

スタイル.css:

.loginInput {
    margin-right: -11px;
    background: #0099FF;
    padding: 0;
    color: #000066;
    font-size: 36px;
    font-family: 'Cubano', Arial, sans-serif;
    vertical-align: bottom;
    height: 50px; 
    border: none;
}