Why does my CSS not change the height of the submit button? The width changes but the height doesn't. I've also tried using padding but again it doesn't change.
Here is my code: -
.contact-form input[type="submit"] {
width: 100%;
height: 65px;
}
<form class="contact-form" action="">
<input type="text" name="fullname" placeholder="full name">
<input type="text" name="email" placeholder="email address">
<input type="text" name="subject" placeholder="subject">
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="Submit">
</form>
https://i.stack.imgur.com/DpdQK.png
Thanks
You have to use padding in your submit button in order to size it. I put an example below.
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 40px 20px;
border: none;
}
<form class="contact-form" action="">
<input type="text" name="fullname" placeholder="full name">
<input type="text" name="email" placeholder="email address">
<input type="text" name="subject" placeholder="subject">
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="Submit">
</form>
Related
Any idea why the styling is not effective when I use id on the form tag but it becomes effective after replacing id with class
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
#contact-form{
display: block
}
It is applying to form and it is displaying as block but it seems you want form child elements to be displayed block so use * with #contact-form
#contact-form * {
display: block
}
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
And form tag is a block-level element but input label is not.
You can see by applying other properties to id
#contact-form {
display: block;
background-color: red;
}
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
I have a form inside a div. I want to move the div to the right, and I can do that if I use an inline style like this:
<div class="joinform-page" style="margin-left: 30%;>
I want to move it using margin-left: 30% in the css, not as an inline style because inline styles make media queries more difficult. But it ignores any margin changes I make in the css.
Here's the full html:
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
Here's the relevant css class:
.joinform-page {
width: 80%;
padding: 0% 0 0;
margin-top: -2.5%;
margin-left: 30%; }
Why doesn't this div move when I use margin-left in the css,. not as an inline style.
Thanks for any help.
Actually It was working with the same piece of code.
If it still doesn't work, there might be styling for parent element or another styling for same element.
The CSS you have above works as you would expect. Please ensure your CSS is correctly imported like so:
<!-- Where FILE_NAME is the name of your .CSS file -->
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">
.joinform-page {
width: 80%;
padding: 0% 0 0;
/*margin-top: -2.5%;*/
margin-left: 30%;
}
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
I have this HTML form that previously I had the width of the input fields to be 100% but I made some changes and did not know what caused the change.
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
</form>
I have already added the following CSS in my HTML
.input {
width: 100%;
}
.textarea {
width: 100%;
}
.form {
width: 100%;
}
Fiddle link - https://jsfiddle.net/v83g4003/
input textarea form are HTML tags not a class. You have used . in css before HTML tags which indicates it as a class thats why your css is not working.
Just remove . in your css
Stack Snippet
input {
width: 100%;
}
textarea {
width: 100%;
}
form {
width: 100%;
}
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>
Have a look at this edited jsfiddle: jsfiddle example
Also using width:100% as a html attribute will not work, in html you will need to do it like 'width="100%"'. Though using a CSS is better since it seperates your design from your logic (as you probably already knew)
I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:
create a label element selector to float to the left with block
display set text alignment to right assign width of 8em set an
appropriate amount of padding configure and input element and
textarea element selectors with block display of 12em bottom margin
Here is the code I have so far:
form{
float:left;
display:block;
text-align:right;
width:8em;
}
input {
display: block;
margin-bottom:1em;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
.form{
margin-left: 12em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.
Here's the working fiddle: https://jsfiddle.net/qptgsc1e/
Just some minor changes, Replace this CSS and HTML and you're good to go.
If you want to see the code changes Check it here
form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>
First lets start with fixing your HTML.
This line is formatted wrong.
<input type="email" name="email" id= value"" required> <br>
Needs to be
<input type="email" name="email" id="" value="" required> <br>
To be.
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
Now that we have that fixed as well as some spacing we can start on centering the submit button.
Now we will wrap the submit button with a div
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.
.buttonHolder{ text-align: center; }
Final HTML:
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>
Check if this style works for you.
form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
min-width: 180px;
}
label{
display: block;
}
input {
display: block;
margin-bottom:1em;
}
input[type="submit"]{
display: block;
margin: auto;
width: auto;
min-width: 50px;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css
Is there a way to fix a form in such a way that the form does not fluctuate?
The desired shape of the form is:
The actual shape of the form fluctuates:
Here is the .css:
form {
background-color: white;
padding: 20px;
border: 1px solid black;
position: fixed;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
float: left;
}
#textarea-container {
float:right;
}
#inputs-container {
float: left;
width: 145px;
}
input[type=text] {
width: 100%;
}
input, textarea {
display: block;
}
textarea {
height: 100px;
width: 140px;
}
If you look at the .css, the form property for position is marked as fixed but the form still fluctuates.
Here is the HTML
<form name="contactform" method="post" action="mail.php">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
<input id="submit" type="submit" value="Submit">
</form>
Since you have floats on the two divs inside the form, you'll need to put a wrapper around them and set a fixed width, ie:
<form name="contactform" method="post" action="mail.php">
<div id="wrapper">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
</div>
<input id="submit" type="submit" value="Submit">
</form>
and
#wrapper{
width:250px;
}