CODEWITHSUNDEEP
csswordpressinput
N-WS
N-WS

Reputation: 181

Add border to text of input field

I am trying to get the following to display the word "Search" with a border underneath the text itself (not the input window). I attempted to use the CSS placeholder as found here How do I Add border to text in inputfield, but it will not work. Here is my input box (it is a search box for wordpress):

<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />

I would be much obliged to whomever can give me a fix. I know that it is because I have onfocus= and onblur= instead of just placeholder=, but can't seem to figure it out.

Here is my fiddle http://jsfiddle.net/6Gevu/14/

Upvotes: 0

Views: 1111

Answers (3)

Dolchio
Dolchio

Reputation: 467

You could enclose your input box into a div and style that div to look like your input box. Then force the input box to to only show the bottom border. 

<div class="input-box"><input type="text" /></div>

.input-box
{
     /*your styles here*/
}

input
{
     border:0;
     border-bottom:/*some value*/
}

Upvotes: 0

Dom Day
Dom Day

Reputation: 2562

You can make use of the :after pseudo-element to generate a border, like so: http://jsfiddle.net/RMJWH/

.search-border {
    position: relative;
    display: inline-block;
}
.search-border:after {
    content: ".";
    color: transparent;
    position: absolute;
    bottom: 5px;
    left: 2px;
    width: 238px;
    border-bottom: 2px solid #000000;
}

Upvotes: 0

Tdelang
Tdelang

Reputation: 1308

put a css line: text-decoration: underline; when it says 'search' and remove that style when it's something else. Maybe by adding and removing a class (.underline) to the input field.

Upvotes: 1

Related Questions