Border not full height of css element

Question

I would like to know how to make the border of an element not covering the entire length of the element. I saw some suggestions to use linear height, although this does not seem to work for me (at least not with the <ul> tag that I am using).

A popular example of whoever did this would be to search for http://android.com , which has such an effect, although I cannot find everything related to it in css.

Example:

Answer 1

How about something like that ... It's not a completely cross browser due to pseudo-elements and content content, but it's a different solution - and it works.

HTML

 <!--// can't use pseudo elements on input, so let make a div contenteditable //--> <div class="foo" contenteditable></div> 

CSS

 .foo { position: relative; width: 150px; } .foo:after { position: absolute; top: 1em; left: 0; content: ""; width: 150px; height: 0; border-bottom: 1px solid #bada55; } .foo:before { content: ""; position: absolute; left: 0; top: 0.5em; height: 0.5em; width: 1px; background: #bada55; } .foo:focus { outline: solid transparent; } 

Jsfiddle

Answer 2

Here is another option for the mix. box-shadow quickly becoming one of my favorite new CSS features ...

No extra markup, nothing but CSS (and no pseudo-elements) ...

DEMO: http://jsfiddle.net/npsMx/2/

HTML

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

CSS

 .search { border: 0px solid blue; border-bottom-width: 1px; -webkit-box-shadow: -5px 4px 0px -4px blue; -moz-box-shadow: -5px 4px 0px -4px blue; box-shadow: -5px 4px 0px -4px blue; } 

We force box-shadow only the left side. By setting it to -5px , set the width to the left as soon as ... -4px later spectacular shuffles return along the path, leaving only one pixel visible (i.e. equal to our border-bottom-width .

It's hard to explain, but easy to see if you are just playing with values!

Answer 3

Take a look at the markup in your example:

 <div class="search" id="search-container"> <div class="search-inner"> <div id="search-btn"></div> <div class="left"></div> <form action="/search/" id="search" name="search"> <input id="q" name="q" placeholder="Search" speech="" type="text" x-webkit-speech=""> </form> </div> </div> 

What you are looking for is a <div class="left"> .. look at the CSS:

 .search:hover .bottom, .search:hover .left, .search:hover .right { background-color: #33b5e5; } 

This is what creates a small blue line on the left side.

I take back what I said about pseudo-elements because they will not work with inputs ... You must use a wrapper to achieve this correctly.

Answer 4

Here is one approach using a wrapper around the input element.

Suppose you have the following HTML:

 <div class="input-wrap"> <input type="text" value="Search..."> </div> 

Apply the following CSS:

 .input-wrap { display: inline-block; position: relative; border-bottom: 1px solid red; border-left: 1px solid red; height: 10px; width: 100px; } .input-wrap input { position: absolute; bottom: 0; left: 0; width: inherit; border: none; background-color: beige; } 

Fiddle: http://jsfiddle.net/audetwebdesign/rLCHa/

In this design, the external .input-wrap element controls the width of the input field and the bottom border, as well as the height of the left border (10px in this example).

The input field is positioned absolutely and fixed at the bottom of the parent container and inherits the width. The height of the input field is the default, but you can control it regardless of the height set in the .input-wrap element.

Answer 5

Another solution is to absolutely position the div as the left border.

  .box {width:205px; position:relative;} .line {width:1px; height:10px; background:#ff0000; position:absolute; left:0; bottom:2px;} input {width:180px; background:#fff; color:#000; border:0; border-bottom:1px solid #ff0000; padding:5px 10px; position:absolute; left:1px; bottom:0;} 

HTML

 <div class="box"> <div class="line"></div> <input type="text" value="Search" /> </div> 

Jsfiddle example