Creating an input element with a dotted border

Question

I want to place an input element in a form. However, instead of it having a solid-box border, I want it to have a dotted border.

This is similar to what basecamp has for inviting new people to existing projects.

Any ideas how to do that?

Solution 1

This is the code I came up with:

HTML

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

CSS

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

Here is a jsfiddle.

Solution 2

HTML:

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

CSS:

.dotted-input {
    border: 0px; 
    border-bottom:1px dotted #000;
}​

Solution 3

Here's one

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

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

DEMO

Comments

[murtaza52]

I am unable to get the above style working. I am using twitter bootstrap, could that be overriding the styles you have provided above ?

[Sean Keating]

It would be likely they would use this on multiple input fields, so a class would me more appropriate than an Id.

[Shiridish]

Yes may be there is some CSS specificity issue there. Do you find the above css overridden with existing css in Firebug or developer tools?