CODEWITHSUNDEEP
htmlcssinputstyles
Jaroslav Klimčík
Jaroslav Klimčík

Reputation: 4808

Input text without box with CSS

My client wants search input which will look something like this:

search input

The "Search..." is input text and loupe is submit button (that isn't problem to create). I was looking for some tutorial but I didn't found anything. Is possibility to create input which will look like this? If yes, can you explain me to how to create it or just refer me to some tutorial? Really thanks advance.

Upvotes: 3

Views: 21819

Answers (4)

Sara
Sara

Reputation: 272

Check this fiddle. Give 

border-bottom

Upvotes: 0

NinjaOnSafari
NinjaOnSafari

Reputation: 1016

i created a cssdeck: http://cssdeck.com/labs/iicbd9ko

HTML:

<form>
  <input type="text" name="search" placeholder="Search..." />
  <button type="submit">[search icon]</button>
</form>

CSS:

::-webkit-input-placeholder {
   color: #fff;
}

:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

:-ms-input-placeholder {  
   color: #fff;  
}

form {
  margin: 50px;
  padding: 5px;
  background: green;
  display: inline-block;
}

form input {
  border: none;
  background: transparent;
  border-bottom: 1px solid #fff;
  outline: none;
}

form button {
  background: transparent;
  border: 0;
  color: #fff;
}

TJL

Upvotes: 10

Sakthi Kumar
Sakthi Kumar

Reputation: 3045

<div class="search">
<input type="text" class="searchbox"></input>
<input type="image" class="searchbtn" src="img/search.jpg"></input>
</div>

.searchbox
{
outline:none;
width: 220px;
height: 30px;
font-size: 14px;
font-weight:700;
font-family: Arial;
border-bottom: 1px solid blue;
margin:0px;
float:left;
}

Hope this helps. outline:none will not draw the outline when the input is focussed.

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

Assuming your input is: 

<input id="search" type="text" />

Style it using css:

input#search {
    border: none;
    border-bottom: 1px solid gray;
}

Upvotes: 1

Related Questions