Can i style my textarea this way using css?

[JohnMotylJr]

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:

Name: 









Email: 









Message: 

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.

[Matt87]

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)

[JohnMotylJr]

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..

[voila]

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,

Name:

Email:

Message:

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

[JohnMotylJr]

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.

[Author]

Posts