With this code (jsbin here) the initial of placeholder text in the password field is pushed to the right, but once you click inside the input padding vanishes and you get correct alignment. What is causing this, and what needs be reset?
Markup:
<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>
CSS:
input {
font-family: monospace;
font-size: 20px;
width: 250px;
}
You can use text-align: left for placeholder pseudo-class to make sure that it's displayed on the web browser correctly at the left.
For the Webkit web browsers (Chromium in this case):
::-webkit-input-placeholder {
text-align: left;
}
Related
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
I am trying to get the following to display the word "Search" with a border underneath the text itself (not the input window). I attempted to use the CSS placeholder as found here How do I Add border to text in inputfield, but it will not work. Here is my input box (it is a search box for wordpress):
<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />
I would be much obliged to whomever can give me a fix. I know that it is because I have onfocus= and onblur= instead of just placeholder=, but can't seem to figure it out.
Here is my fiddle http://jsfiddle.net/6Gevu/14/
put a css line: text-decoration: underline; when it says 'search' and remove that style when it's something else. Maybe by adding and removing a class (.underline) to the input field.
You can make use of the :after pseudo-element to generate a border, like so: http://jsfiddle.net/RMJWH/
.search-border {
position: relative;
display: inline-block;
}
.search-border:after {
content: ".";
color: transparent;
position: absolute;
bottom: 5px;
left: 2px;
width: 238px;
border-bottom: 2px solid #000000;
}
You could enclose your input box into a div and style that div to look like your input box. Then force the input box to to only show the bottom border.
<div class="input-box"><input type="text" /></div>
.input-box
{
/*your styles here*/
}
input
{
border:0;
border-bottom:/*some value*/
}
I have a super simple HTML form:
<form name="editor" action="#" method="POST">
<textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
</form>
Text echoed inside it is HTML code.
Now, when CSS is turned off, it works perfectly.
But when it's turned on, I:
can't click anywhere inside the textarea text to place the cursor there
can't move cursor with arrow keys, it will only move a few characters left and right, and if up/down arrows are pressed, it moves the cursor to the very top/very bottom of the textarea.
What have I tried:
Excluding the textarea from CSS firebug showed applied to it
Trying with or without JS to check if that makes a difference
Tried different browsers, same issue repeats
Turning off CSS completely and then it works, but it's not an option
The only idea I have is that maybe the textarea is inheriting some CSS from somewhere, but what kind of CSS would cause such behavior, what to look for?
Here's the CSS as seen by firebug:
textarea {
overflow: auto;
resize: vertical;
vertical-align: top;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
html, button, input, select, textarea {
color: #222222;
font-family: sans-serif;
}
Thanks for any replies!
Thanks everyone! You actually helped me by setting this fiddle, I started pasting part by part of CSS there, and here's what caused the issue, if anyone gets into same problem:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Basically disabled text selection was obviously inherited from body.
Thanks everyone again.
PS. Also to clarify to anyone who suspected that my code inside textarea was unescaped - yes it was, but that doesn't seem to be a problem, you obviously can do that.
I want to vertically center the text entered in input text boxes on the page.
Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.
However; on iOS 5, Safari displays the typed text vertically centered... But the placeholder text and the cursor appear top aligned.
.txtBox {
line-height: 3em;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
Anyone else facing this issue?
For me there is only one solution that appears close to perfect in all browsers I tested (Chrome, FF, Safari (+iOS), IE10):
line-height: normal;
Solutions like line-height: 100% and line-height: 1; seem to be aligned towards the top of the input, especially in Chrome.
http://jsfiddle.net/5Vc3z/
Comparison:
http://jsfiddle.net/5Vc3z/1/
Setting line-height: 1; seems to fix this.
You should use percentage for the line-height.
.txtBox {
line-height: 100%;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
Assuming you are just trying to make the input field appear larger then you could use padding:
.txtBox {
font-size: 1em;
padding: 1em auto;
}
Also, your input field should be:
<input type="text" class="txtBox" placeholder="Name" />
Edit
Sorry, took a little while. It appears that placeholder can be styled individually and / or inherit styles from the parent. Unfortunately there are quite a lot of styles that are not supported by Safari at this time.
The following blog has details about the styling techniques and which are / are not supported within certain browsers:
http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
I got stuck on this issue for a long time despite using
input::-webkit-input-placeholder {
line-height:normal!important;
}
It turns out the having a line-height in the input element by itself was breaking my input::webkit-input-placeholder line-height.
Solution extended:
I removed the line-height in my input style and it fixed my issue.
My markup looks like so:
<p>
<select></select>
<input type="submit" id="submit" value="submit" name="submit" />
</p>
Here's the CSS:
//No specific styles for the select element nor inherited ones.
#submit {
background: url("images/img.png") no-repeat scroll 0 0 transparent;
border: 1px solid #FFFAEE;
cursor: pointer;
height: 34px;
margin-left: 30px;
width: 145px;
}
The issue is the submit button is a few pixels above the select element. Here's a screenshot:
This happens in Webkit browsers and IE but not in Firefox.
I copied your code into jsfiddle and the select and submit button align up nicely in ff,chrome and ie9.
http://jsfiddle.net/PTF3Q/
Apparently there's some code you're not supplying causing this - do you have a live url to the page?
If not, you could try: vertical-align: middle;