...

View Full Version : CSS Styling a Input Textarea.



DejaVu
01-23-2012, 02:52 PM
Can anyone lend a bit of assistance with this snippet of CSS please.

It's an input textarea I'm trying to make transparent, but it seems no matter what I do, the font inside the textarea is inheriting from how I set the background.



.filter {
background: url(/static/images/alpha/fff_10.png);
color: #fff;
position: absolute;
left: 5px;
width: 170px;
height: 28px;
cursor: pointer;
line-height: 1.5em;
margin-top: -4px;
padding: 2px 12px;
right: 0px;
font-size: 1.2em;
.border-radius(4px);

&:hover {
background: url(/static/images/alpha/fff_20.png);
}

}
the fff_10.png and fff_20.png are 1 pixel images with 10% or 20% opacity.

I've tried using background-color: white; with opacity: 0.2; which works, but the font vanishes as it inherits the same color as the background. I've tried changing the font color to black, which then is visible, but looks terrible in the overall look of things. Really need this Opacity to work and the text to be a solid white.

For Div's it works perfectly, textarea's not so much. :(

Can this not be done?
No amount of googling has helped so far so I hope your guys can. :)

DarkLaika
01-23-2012, 09:41 PM
You need to style the input area like this:


#input-wrapper input {
background: url(/static/images/alpha/fff_10.png);
color: #fff;
position: absolute;
left: 5px;
width: 170px;
height: 28px;
cursor: pointer;
line-height: 1.5em;
margin-top: -4px;
padding: 2px 12px;
right: 0px;
font-size: 1.2em;
.border-radius(4px);
}

#input-wrapper input:focus {
background: url(/static/images/alpha/fff_20.png);
}

That changes the input background when it is clicked. Just put the input areas like this:


<div id="input-wrapper"><input name="input" type="text" /></div>

DejaVu
01-24-2012, 05:08 AM
Thanks DL. That certainly has helped and makes it look exactly as is needed - apart from one minor problem that I did not realise was relevant.

The type="text" part does as is required, but I did not realise there is a difference between the input being a text field and a search field (still learning :))

Changing it to type="search" brings me back to square one.
Is it still possible while keeping this in the input tag somehow?

--EDIT
Managed to find the solution to this problem.
Turns out it was the Webkit auto skinning the search box.

Resolved it using this.
http://stackoverflow.com/questions/2992215/html5-search-input-no-background-image-in-chrome

Thanks again. K+ added.
Good to know I can get some assistance when I'm struggling. Such a great forum. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum