Grow your CSS skills. Land your dream job.

Can i style my textarea this way using css?

  • # January 20, 2012 at 5:03 am

    Howdy yall, im designing a very small form for my personal site. Basically i am styling my text boxes with no backgrounds but just a bottom border. Now my text area i would like to have it look “lined” like my text boxes.

    Here is the screen shot:
    http://gyazo.com/b7fcce8f1ad0f310dbedeec08fba4bf2

    And here is the CSS:


    #text-input {
    font-size:18pt;
    border-bottom:1px solid #1d1d1d;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    padding:0px 0px 0px 10px;
    width:350px;
    font-family: 'Handlee', cursive;
    border-radius:6px;
    color:#0072ff;
    text-transform: lowercase;
    }

    The html code:





























    Clearly three text boxes is not what i want to achieve, but i merely added them to show my desired effect.

    Basically i want to style a textarea to have lines, is this possible with just css?

    I appreciate any feedback.

    # January 20, 2012 at 5:58 am

    Why not just insert a textarea instead?
    Also, you’re code is sloppy, you should stop making empty attributes, why not just not add them? The default of most HTML attributes and CSS is nothing.
















    Now new CSS:


    #text-input textarea{
    font-size:18px;
    border-bottom:1px solid #1d1d1d;
    padding:0px 0px 0px 10px;
    width:350px;
    font-family: 'Handlee', cursive;
    border-radius:6px;
    color:#0072ff;
    }

    The border-left and all of that as well as the placeholder is empty by default, no need to set it to ” “.

    # January 20, 2012 at 5:59 am

    Why not just insert a textarea instead?
    Also, you’re code is sloppy, you should stop making empty attributes, why not just not add them? The default of most HTML attributes and CSS is nothing.
















    Now new CSS:


    #text-input-textarea{
    font-size:18px;
    border-bottom:1px solid #1d1d1d;
    padding:0px 0px 0px 10px;
    width:350px;
    font-family: 'Handlee', cursive;
    border-radius:6px;
    color:#0072ff;
    }

    The placeholder is empty or none by default.

    # January 20, 2012 at 11:46 am

    u would always declare border top, left, bottom, right styles
    just set the colours to the same as ur background or use rgba(255,255,255,0) (white, invisible)

    # January 20, 2012 at 12:40 pm

    Shart, i believe there was a little misunderstanding or maybe i wasn’t clear in which i apologize but i already know that i need a textarea.. The three text boxes were just there for graphical reasons. The empty placeholders actually had content that i deleted and setting my border styles is sloppy? My attempt of being semantic isn’t what i’m asking about because i do just fine.

    The original question is how to style a textarea to look like how i had those three text boxes..

    # January 21, 2012 at 5:42 am

    I believe Matt87 answered. If it works like you want, will you post back and let us see, so this can be marked as “SOLVED” :)

    Using your code and Matt87’s suggestion, it works. I added border-radius,




    Looks cool. I love the way you created the form image.

    # January 21, 2012 at 5:55 am

    Oh, I see now, I was wrong on the sloppy thing, I get it now :). My point was that empty attributes are unnessecary normally, and the border thingy was just wrong by me. My apoligies!

    # January 21, 2012 at 5:01 pm

    Essentially my latest attempt didnt give me my desired effects however i had just kept the basic idea but keep my labels underlined and my input areas (textarea, input=”text”) will have a styled left/bottom border.

    Screen shotty:
    http://gyazo.com/83bd62a1d9f77f76de3b4b1b0be61325

    Thanks Voila!

    @Schart, when i post code on forums i try to ensure its nice and tidy, just didn’t have time, but its cool thank you.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".