Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Styling a Input Textarea.

    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.

    Code:
      .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.
    Last edited by DejaVu; 01-23-2012 at 02:55 PM.

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    8
    Thanked 4 Times in 4 Posts
    You need to style the input area like this:

    Code:
    #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:

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

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/2...mage-in-chrome

    Thanks again. K+ added.
    Good to know I can get some assistance when I'm struggling. Such a great forum.
    Last edited by DejaVu; 01-24-2012 at 05:40 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •