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;” 带有“边框底部：2px 实心#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

这是一个

<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 回答