1

I am just trying to design my Search textbox like this

enter image description here

and I have tried like this,

border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;

and I am getting like, enter image description here

I can give style and color for border-bottom, I don't know how to design that small line in both right and left sides. can anyone help me out here, thanks in advance

asedsami
  • 609
  • 7
  • 26
shanish
  • 1,964
  • 12
  • 35
  • 62

5 Answers5

4

You can try this:

<div class="inputWrapper">
<input type="text">
</div>

and the css:

    .inputWrapper {
  border-bottom: solid 1px #009999;
  border-left: solid 1px #009999;
  border-right: solid 1px #009999;
  overflow: visible;
  max-height: 2px;
  display: inline-block;
  padding: 2px;
}
input {
  outline: none;
  border: none;
  background: transparent;
  padding-bottom: 3px;
  position: relative;
  bottom: 5px;
}

The idea is basically to wrap the input with a wrapper which will have the lines of your style. Here is the fiddle: http://jsfiddle.net/jBq4u/3/

Mimo
  • 6,015
  • 6
  • 36
  • 46
  • Nice, except maybe make the wrapper relative and compensate for the offset of the input, otherwise your positioning will be a bit off. – Daniel S. Jul 05 '13 at 06:22
  • but am not able to increase the height. If I increase the height, it affects the design, what to do? – shanish Jul 05 '13 at 06:32
  • you can increase the height of by editing the max-height property, then you can change the bottom position of the input to get everything right. – Mimo Jul 05 '13 at 06:36
  • Oh is it, I just tried increasing only the max-height of wrapper, I'll try adjusting the input also, thanks – shanish Jul 05 '13 at 06:40
  • I changed the example to this something bigger, have a look ;) http://jsfiddle.net/jBq4u/4/ – Mimo Jul 05 '13 at 06:45
  • that's nice, it looks cool, if you don't mind, can you help me to reduce the height of the borders in the both the sides??, its something like I have mentioned in my question. – shanish Jul 05 '13 at 06:54
  • I changed this way, just change the padding and max height http://jsfiddle.net/jBq4u/5/ – Mimo Jul 05 '13 at 07:01
2

Here you go: http://codepen.io/anon/pen/rjlJv

HTML

<div id="container">
   <input type="text" id="something" />
</div>

css

#container {
  background-color: grey;
  display: inline-body;
  padding: 10px;
  width: 13%;
}

#something {
  border: none;
  outline:none;
  outline-offset: 0;
  border-bottom: 1px solid;
  border-color:#33B5E5;
  padding:10px;
  background-color: grey;
}
bzupnick
  • 2,646
  • 4
  • 25
  • 34
1

create one background image like you need bottom line and put there in your class for textbox. it should work I guess.

always relax
  • 94
  • 5
1

This fiddle comes a little close.

// HTML
<span class="l">&nbsp;</span>
<input type="textbox" id="tb"/>
<span class="r">&nbsp;</span>

// CSS
#tb{
    border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
    border-right : solid 1px #33B5E5;
    border-left : solid 1px #33B5E5;
}

span.l{
    position:relative;
    left : 10px;
    top:-2px;
    background-color:white;
}

span.r{
    position:relative;
    left : -10px;
    top:-2px;
    background-color:white;
}
mohkhan
  • 11,925
  • 2
  • 24
  • 27
  • Ya, its close, I just tried like this also, but I want that borders as it is in the image I have shared.... anyhow, Kicker's solution solved my issue, thanks for your help mohkhan. – shanish Jul 05 '13 at 06:27
0

You can also try using Pseudo element.

Praveen
  • 55,303
  • 33
  • 133
  • 164