How to style this form using CSS ? [closed]
- by Rafael
Hi all ,i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :
