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.
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.
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.
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)
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..
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!
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.
Here is the screen shot:
http://gyazo.com/b7fcce8f1ad0f310dbedeec08fba4bf2
And here is the CSS:
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.
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:
The border-left and all of that as well as the placeholder is empty by default, no need to set it to " ".
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:
The placeholder is empty or none by default.
just set the colours to the same as ur background or use rgba(255,255,255,0) (white, invisible)
The original question is how to style a textarea to look like how i had those three text boxes..
Using your code and Matt87's suggestion, it works. I added border-radius,
<style type="text/css">
#text-input {
font-size:18pt;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border-bottom:1px solid #1d1d1d;
border-top:rgba(255,255,255,0);
border-left:rgba(255,255,255,0);
border-right:rgba(255,255,255,0);
padding:0px 0px 0px 10px;
width:350px;
font-family: 'Handlee', cursive;
border-radius:6px;
color:#0072ff;
text-transform: lowercase;
}
</style>
<label for="name">Name: </label>
<input type="text" placeholder="" id="text-input" class="text-bg">
<br><br>
<label for="email">Email: </label>
<input type="email" placeholder="" id="text-input" class="text-bg">
<br><br>
<label for="comment">Message: </label>
<input type="text" placeholder="" id="text-input" class="text-bg">
<br>
<input type="text" id="text-input" class="text-bg" style="margin-left:100px;">
<br>
<input type="text" id="text-input" class="text-bg" style="margin-left:100px;">
<br><br>
<input type="submit" value="Send" class="btnSubmit">
Looks cool. I love the way you created the form image.
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.