I'm making a contact form. Now obviously I'll want the message box bigger than the Email and Subject input boxes. So obviously I can't just type in my input in css because it'll change all boxes. I thought specifying the message box would go something like this
input [type="text" name="message"] {
padding-bottom: 500px;
}
That obviously didn't work... So what am I doing wrong?
HTML
<div id="contactContent">
<form>
<label>Email:</label><input type="text" name="email" />
<br>
<label>Subject:</label><input type="text" name="subject" />
<br>
<label>Message:</label><input type="text" name="message" />
</form>
</div>
CSS
#contactContent {
margin-top: 50px;
margin-left: 350px;
}
input {
border: none;
background-color: #CCCCCC;
margin-left: 20px;
margin-bottom: 5px;
padding-right: 250px;
padding-top: 13px;
padding-bottom: 13px;
}
label {
display:inline-block;
width:100px;
font-family:maven;
color: #FF6464;
font-size: 20px;
text-align: right;
}
input [type="text" name="message"] {
padding-bottom: 500px;
}
Your selector is incorrect, the correct way to apply a style to the element via both its type and name would be:
input[type="text"][name="message"] {
padding-bottom: 500px;
}
Although you'd be better off using a class or id to target the element unless you have a good reason for doing it like that.
The better option for a message box is the <textarea> element:
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
Then styles for that don't compete with the input styles.
Anyhow, if for some reason you do just want a one line input, another styling hook would be a unique class or id.
Related
I am trying to style the following form.
<form onSubmit={this.updateUserInformation} id="userInfoForm">
<label>First Name</label><br></br>
<input type="text" value="John"></input><br></br>
<label>Last Name</label><br></br>
<input type="text" value="Maloy"></input><br></br>
<label>Username</label><br></br>
<input type="text" value="John"></input><br></br>
<label>Password</label><br></br>
<input type="text" value="Maloy"></input><br></br>
<input type="submit" value="Update My Info"></input>
</form>
Please ignore my values; I will be adding dynamic info later.
The issue is that I have several forms on my web page, so I don't want to create a style on my css file for the input tag as it would style all my input fields the same. It there a way to style all the input fields of a form based on the id of the form without having to add an id to every individual input field?
For example, here is my css file style for the form that is not quite working:
#userInfoForm {
width: 300px;
margin: 0 auto;
input {
border-radius: 25px;
}
}
My logic behind this is to style each input within the identified form. Any suggestions would be appreciated!
I found the following answer. It styled each input field of my identified form without having to add an ID to each field. This is similar to the attribute selector mentioned above in the comments.
#userInfoForm {
width: 80%;
padding: 5px 5px;
margin: 0 auto;
background: #FF6700;
border-radius: 25px;
}
#userInfoForm input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 25px;
}
You can style an specific input field here by a unique portion. Which will enable you to style specific input (possible if have uniqueness) without id or class
Example:
You have three input fields -
- <input type="text" name="username" value="" />
- <input type="text" name="email" value="" />
- <input type="pass" name="password" value="" />
the uniqueness between three is name. That are [name="username"], [name="email"], [name="password"] (where [type="text"] will select first two input element, value="" is discarded because it can have random value)
This is for if you want for a specific form all inputs are different looking
So, can apply as -
#userInfoForm {
width: 300px;
margin: 0 auto;
[name="username"]{
border-radius: 20px;
}
[name="email"]{
border-radius: 25px;
}
[name="password"]{
border-radius: 30px;
}
}
Another way
if the number of input fields are predefined in a form, can use child selector
#userInfoForm {
width: 300px;
margin: 0 auto;
input {
&:nth-child(1) {
border-radius: 20px;
}
&:nth-child(2) {
border-radius: 25px;
}
}
}
This is for if you want for a different form inputs are different looking as form wise (but for a specific form all inputs are same, different form's inputs are different)
#userInfoForm input {
background-color: red;
}
#userInfoForm2 input {
background-color: yellow;
}
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.
my HTML:
<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>
CSS:
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
input
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
textarea
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
input:focus
{
border:solid 1px #EEA34A;
}
The written form is not correct, 'cos the entire form is wrapped in Label
when conventionally set so
<form action="">
<div> <label for=""> </ label> </ div>
<div> <input type="text"> </ div>
</form>
Which is possible without the div
You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See #verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.
But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:
form
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)
This is how you should use Label tag
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
To resolve this issue you need to modify html part.
You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.
Regards,
Vishal Bagdai
Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).
See: http://www.w3schools.com/tags/tag_label.asp
Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:
#divID
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
or give it a class (eg. divClass) and change your css to:
.divClass
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
I am trying to remove a border from a input text field for my contact form.
Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.
I tried my best to mess around with the CSS to make it work, but somehow its not working.
HTML
<section id="contact">
<div class="container">
<h3 class="contact-section-title">Need advice?</h3>
<p class="contact-section-sub-title-form">Drop me an email below.</p
<div class="grid-row col-2">
<div class="grid-unit3">
<form name="form1" method="post" action="contact.php" >
<input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
<input name="cf_email" placeholder="What is your email? (Eg: johndoe#johndoe.com)" type="email" required />
<textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
<button class="submit" type="submit">Send email</button>
<br><Br><br><Br>
</form>
</div><!--class="email" type="email"-->
</div>
</div>
</section>
JSFiddle
Would appreciate some solid help on this. Don't know where to go from here.
Thank you.
Changes I made ->
border:0px solid #58B9FA;
line 105.
The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:
input {
border: 0
}
Updated Fiddle
Changed the border property in css from following
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:1px solid #58B9FA; }
to
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:0px solid #58B9FA; }
set border: none; or border:0 in your input css
FIDDLE
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.