Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Textfield with only bottom border [closed]

Tags:

html

css

How can I create a Text field that has a transparent or no background, no top,left and right border?

I am only using CSS and HTML.

like image 626
Rusty Avatar asked Feb 16 '14 04:02

Rusty


People also ask

How do you remove border-width?

We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.


2 Answers

Probably a duplicate of this post: A customized input text box in html/html5

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
}
<input></input>
like image 110
JunM Avatar answered Oct 08 '22 02:10

JunM


See this JSFiddle

input[type="text"] {
  border: 0;
  border-bottom: 1px solid red;
  outline: 0;
}
<form>
  <input type="text" value="See! ONLY BOTTOM BORDER!" />
</form>
like image 21
Douglas Denhartog Avatar answered Oct 08 '22 00:10

Douglas Denhartog