0

何時間ものグーグル検索が実りがないので、誰かがこれに答えるのを手伝ってくれることを願っています。私は現在、フォームラベルをスタイリングするこのコードを持っています:

label {
    display:inline-block;
    height: 15px;
    width: 350px;
    float: left;
    padding: 5px;
    border-top: 1px solid black;
    color: black;
    font-size: 12px;
}

input、textarea、および select タグに同じ border-top プロパティのスタイルを設定したいと思います。ただし、これらの要素に border-top をスタイル設定すると、要素自体の周囲の境界線が明確にスタイル設定されます。境界線を外側に表示できるかどうか、または目的の結果を得るために他のプロパティを使用する必要があるかどうかを知りたいです。

4

2 に答える 2

1

単に必要以上に境界線がはめ込まれているように見えることを意味する場合

input {
   border: 0;
   border-top: 1px solid #333;
}

そして、文字通り「外側」を意味する場合は、シャドウのようなものを使用してスプーフィングできます

デモ

CSS

input {
    box-shadow: 0px -1px 1px -1px #333;
    border: none;
    margin: 50px;
}
于 2013-04-23T15:16:12.340 に答える
0

要素の外側に境界線を持ちたい場合は、各input,textareaまたはの周りにブロック要素が必要になりますselect(おそらくdiv、意味的に関連する要素がない場合)。これらのブロックは境界線を受け取り、フォーム要素と境界線の間の距離を調整できpadding-topますdiv

これには、 on フォーム要素よりもborderonのdiv方がはるかによくサポートされるという利点もあります。border

于 2013-04-23T15:09:17.957 に答える