-1

このテキストボックスのレイアウトを作成したい:

ここに画像の説明を入力

と を使用した電子メール (または彼が電話番号を書いている場所) 用のHTML5ものCSS3。

問題は、このテキスト ボックスの要件です。

  • レスポンシブである必要があります (幅: 100%)
  • ホバーしたいものはありません（下の境界線が青くなる必要はありません）
  • JavaScript を使いたくない

助言がありますか？いくつかの方法を試しましたが、常に問題があります。

4

1 に答える 1

1

あなたが抱えていた問題は、要素の幅が、定義されたwidth プラスpadding（両側の）と（両側の）で構成されていることborder-widthです。

これを回避するには、対応ブラウザでbox-sizingプロパティ セットを使用します (定義された幅の内側にとborder-boxが含まれます)。したがって、次のようになります。paddingborder-width 

.textbox{
    border: 0;
    border-bottom: 1px solid rgb(160,160,160);
    background-color: transparent;
    width: 100%;
    margin-left: -1px;
    margin-right: -1px;
    /*padding-left: 5px;*/
    float: left;
}

以下を追加する必要があります。

.textbox {
    /* the above not changed, the following added */
    padding-left: 2em; /* an arbitrary dimension to demonstrate, adjust to taste */
    box-sizing: border-box;
}

JS フィドルのデモ。

参考文献:

于 2013-05-16T16:08:29.373 に答える