I'm using Foundation 6 framework to construct my pages. I have a separate style sheet called effects.css that I use to customize text and tables and inputs and such.
I actually have to style it, because without the custom styles the input fields are huge and grotesque. Must be some scaled styles in the foundation.css that are responsible.
I made a short, thin text input field, but the text inside doesn't seem to want to vertically line up correctly. The cursor blinks up and sort of half way out of the white text area.
Here's the html:
<form name="quick-connect" id="quick-connect" method="post" action="/ajax/quick-connect-action/" onsubmit="return false;">
<span class="med-text white-text">Your name:</span><input type="text" name="name" id="name" class="small-input" />
<span class="med-text white-text">Your phone #:</span><input type="text" name="number" id="number" class="small-input" />
<input type="submit" name="submit" id="quick-connect-submit" value="Submit" />
<input type="hidden" name="page" value="LCHG" />
</form>
Here's my attempt at css'ing the input fields:
input.small-input{
width:10em;
height:1em;
line-height:1em;
font-size:.9em;
color:#000;
}
Here's what it looks like:
The blinking text cursor isn't vertically align within the text field.
It was a padding problem. I set the padding to 0 within the input style, and the text properly vertically aligns now.
input.small-input{
width:10em;
height:2em;
line-height:2em;
font-size:.8em;
color:#000;
padding:0;
}
Related
I have an input text box with the placeholder text inside; right now, I'm shrinking the placeholder text so that it is still visible when the text box is focused, but when I shrink it, and despite the vertical translation, the placeholder text is too close to the top of the input box.
I understand that the cursor in the text box is still centered, but I'd like for both the placeholder text and cursor to be centered within the text box. Is there a way to do this with just CSS?
// My input text box:
<input
type="text"
className={errors.email && errors.email.length !== 0 ? 'bad-input' : ''}
value={this.state.email}
onChange={this.update('email')}
placeholder="Email"
/>
// My styling to shrink the placeholder text:
.login-modal-wrapper form .main-content-wrapper input[type="text"]:focus::placeholder,
.login-modal-wrapper form .main-content-wrapper input[type="password"]:focus::placeholder {
font-size: 12px;
transform: translateY(-20px);
transition: all 0.5s;
}
For horizontally center, you should use text-align:center.
For vertically adjustments, You need to manually set them but there are 2 options;
You could adjust the padding of the textbox; padding-top:10px; or padding-top:40%;
Adjust line-height of the texts inside the textbox; line-height:20px;.
I read your question again, this time I understood that by adjusting the font size of the placeholder, will affect its vertical alignment relative to the text inside the input field.
You could adjust the placeholder pseudo class by using position:relative and changing the top property;
See example below;
input::placeholder {
position: relative;
top: 30px;
font-size: 100px;
}
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input style="height:100px; width:200px;" type="text" id="fname" placeholder="test" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Sounds easy but say I'm using bootstrap and the input box has a label, when I resize the text underneath is not centered.
Here's some simple html to demo:
<form action="http://google.com">
<div>
<label for="inputBox">Email address</label>
<input name="email" type="text" id="inputBox"/>
<br>
(Center under input)
</div>
</form>
The label should be associated with the input textbox, the text '(Center under input) should appear under the input box in the middle.
So ideally the (Center under input) text should be glued centrally underneath the input textbox while the label acts normally.
Is this possible? I'm trying with a table (of all things) at the moment but can't get it to behave, I've tried positioning etc. still no luck.
Any help is much appreciated.
If you want to centre things relative to each other, then they should generally be placed in a container.
div,
label {
display: inline-block;
vertical-align: top;
}
div {
text-align: center;
}
<form action="http://google.com">
<div>
<label for="inputBox">Email address</label>
<div>
<input name="email" type="text" id="inputBox" />
<br>(Center under input)
</div>
</div>
</form>
Your example content is too abstract to tell, but your centred content should probably be another label element if it is associated with the input.
You can kill 2 birds with one stone - have an accessible input that is compatible with screen readers, and center your text, using this markup structure:
label {
max-width:300px;
display:block;
}
label span {
text-align:left;
display:block;
}
label input {
width:100%;
}
<form action="http://google.com">
<label>
<span>Email address</span>
<input name="email" type="text" id="inputBox"/>
<span style="text-align:center">center me</span>
</label>
</form>
Notice you don't need the for attribute. It's a clean way to accomplish accessibility. Some simple CSS aligns the text. If you don't want to use inline styles, you could always write another class.
I've got a fieldset like this:
<fieldset>
<legend>Testsituation</legend>
Field 1: <input type="text"/><br>
My field 2: <input type="text" />
</fieldset>
Now my field 2's input field is displayed way right of field 1's.
My question here is: Is there an easy way to accomplish the input fields being displayed exactly under each other?
As a fiddle example for how it looks like and what I try to achieve:
http://jsfiddle.net/0pj92kxc/
(the effect that is accomplished by the table is what I'm looking for thus both input boxes at the same horizontal locatoin)
Try like this: Demo
<p> <label> Field 1:</label> <input type="text"></p>
<p> <label>My field 2: </label><input type="text"></p>
CSS:
p{
margin:5px;
display:block;
}
label{
width:100px;
display:block;
float:left;
}
You can archive this in different ways.
I think the Table way is not really wrong to do it, you also can just put them UNDER the the text like
*Loginname*
[ Enter your username.. ]
But if you want to stay the way you want to do, you can define a fixed width for the first text part like following:
HTML
<fieldset>
<legend>Testsituation</legend>
<p class="field">
<label for="f1"><span>Field 1:</span></label> <input id="f1" type="text">
</p>
<p class="field">
<label for="f2"><span>Field 1:</span></label> <input id="f2" type="text">
</p>
</fieldset>
CSS
.field span {
min-width: 75px;
width: auto;
display: inline-block;
}
JSFiddle: http://jsfiddle.net/cqrs10b5/4/
I'm working on a website the designer placed some extra text in a input form
my code:
<form id="hmail">
<input autocapitalize="off" autocorrect="off" autocomplete="on" type="text" name="register" id="getemail" value="your company" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" id="sendmail" value="Claim">
</form>
i was thinking some thing like value="...dock.com" and float right ?
only i cant seem to get this working
Implement "dock.com" as a background image via CSS; something like:
background-image:url(dockimage.png);
background-repeat:no-repeat;
background-position:right;
Set the background image to the text like so:
input[name=theName] {
background: #fff url(path/to/bg.jpg) no-repeat right center;
}
And set a max-length on the input to prevent the input's text going over the background.
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.