2

入力要素をフォームに配置したい。ただし、塗りつぶされたボックスの境界線ではなく、点線の境界線が必要です。

これは、ベースキャンプが既存のプロジェクトに新しい人を招待するために持っているものと似ています。 Basecamp プロジェクトへのアクセス

それを行う方法はありますか？

4

5 に答える 5

7

これは私が思いついたコードです：

HTML

<input type="text" id="dotted">

CSS

#dotted {
    border:0;
    border-bottom: 2px dotted;
}

ここにjsfiddleがあります。

于 2012-12-26T04:16:39.477 に答える
5

HTML:

<input type="text" class="dotted-input">​​​​​​​​​​​​​​​​​​​​​​

CSS:

.dotted-input {
    border: 0px; 
    border-bottom:1px dotted #000;
}​
于 2012-12-26T04:08:45.630 に答える
1

このような：

<input type="text" style="border:0;border-bottom:2px dashed #c3c3c3;padding:5px;color:gray;font-family:Arial;font-weight:bold;font-size:14px;">

破線ではなく実線のみが必要な場合は、「border-bottom:2px dashed #c3c3c3;」を置き換えます。「border-bottom:2px solid #c3c3c3;」で。2px ではなく 1px だけにしたい場合は、「border-bottom:2px dashed #c3c3c3;」を置き換えます。「border-bottom:1px dashed #c3c3c3;」で。また、下部に 2px ピクセルの境界線を追加するコードの部分が「border-bottom:2px dashed #c3c3c3」であることにも注意してください。私が行った残りのコードは、装飾用です。

次のようなスタイルシートを参照することもできます。

<style>
.classy{
border:0;
border-bottom:2px dashed #c3c3c3;
padding:5px;
color:gray;
font-family:Arial;
font-weight:bold;
font-size:14px;
}
</style>

テキストボックスの場合、これを行うことができます：

<input type="text" class="classy">
于 2012-12-26T04:02:42.003 に答える
1

これが1つです

<input type="text" class="dotbox">​​​​​​​​​​​​​​​​​​​​​​

.dotbox{
    border:none;
    border-bottom:thin dashed black;
    padding-bottom:0;
    outline:none;
}

デモ

于 2012-12-26T04:16:52.997 に答える
0

周囲の点線の境界線の場合:

<input type="text" style="border:1px dotted #ccc">

必要な側の点線の境界線:

<input type="text" style="border-<side you want either top, bottom, left, right> 1px dotted #ccc>
于 2012-12-26T04:33:47.417 に答える