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.
Related
I'm able to set the color of input placeholder text in IE11 (Windows 7) but I'm not able to set text overflow to ellipsis for input placeholder text.
Here is the jsfiddle to reproduce this issue (Please open this fiddle link in IE11 on windows 7) ,
https://jsfiddle.net/1nku0aty/3/
HTML
<input type="text" placeholder="longtextlongtextlongtextlongtextlongtext">
CSS
input {
margin: 2em;
}
input:-ms-input-placeholder {
text-overflow: ellipsis;
overflow: hidden;
color: red;
}
Can some one help on solving this?
There is a better answer to this question about IE10:
Placeholder text-overflow:ellipsis in IE10 not working
Basically, apparently it doesn't work unless you make the input field readonly, it is possible to do some hacky javascript to make it readonly except when you click it, but if you have the option of going 'eh whatever, it's IE11 and a minor glitch, who cares' you should probably take that...
Try it like this. That doesn't work in IE as usual.
input[placeholder]{
text-overflow:ellipsis;
}
input{
width:100px;
}
<input type="text" placeholder="loremipsumdolorsitametconsetetur">
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 cannot manage to apply "padding" to checkboxes on IE11, so that they behave the same as on IE10.
On IE10, the computed style for checkboxes was:
width: 13px;
height: 13px;
padding: 3px;
margin: 0;
On IE11, it is now:
width: 13px;
height: 13px;
padding: 0;
margin: 3px;
Although the checkboxes have the same size on both browsers, their behaviour has slightly changed. On IE10, the 3 pixels padding was causing the checkbox to "hover" when passing the mouse 3 pixels around the edges of the box. This is no longer the case on IE11, reducing the clickable area by that many pixels on each side.
I have tried applying the same style as on IE10 to the checkboxes, without any success (see http://jsfiddle.net/LSjb4/). The padding seems to be ignored. I've also tried playing with the width and height (as you would do on Chrome for instance), but this is causing the box to visually stretch.
Can anyone think of a pure CSS solution to get the same behaviour as IE10, retaining the native look of the checkbox (no image please)?
NOTE: please spare the "why are you trying to do that, it's bad for user experience etc." comments. Consider it as a technical challenge with no other purpose than the satisfaction to solve it :)
http://jsfiddle.net/8xmpw/
HTML
<label for="ie11" class="ie11">
<input type="checkbox" id="ie11" />
</label>
CSS
.ie11 {
padding: 3px;
}
.input[type=checkbox] {
vertical-align:bottom;
}
This create a 3px padding area around the label box that allow you to click checkbox without hover entirely into the checkbox.
But this leads another problem that there is a small margin where IE11 has default margin preset. (I am guessing 1px top, 3px bottom)
I think the best you can do is using vertical-align to make either top or bottom border or checkbox clickable;
IMHO:
IE 10 rectangle checkbox perceived as content and 'padding' showed as distance out rectangle.
IE 11 as content perceived contents inside the rectangle and 'padding' just ignor.
Google Chrome browser also behives as IE 11 and ignore padding for checkbox.
For the same display your page in IE10 and in IE11 you must don't use padding for checkbox.
Simple solution is force IE11 simulate IE10 with through use
<meta http-equiv="X-UA-Compatible" content="IE=10">
P.S.
I also was unpleasantly surprised when discover that different behaviour in IE11 and IE10.
I am using Bootstrap.css which inside had classes .checkbox-inline and .checkbox.
If use these css classes, the boxes moved down relatively to label(.control-label).
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
For the same display in IE10 and IE11 I rewrite this classes (of course in other css file)
.form-horizontal .checkbox,
.form-horizontal .checkbox-inline {
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
}
I know that my english isn't so good, but i hope you are understood!-)
I met the same problem recently, and solved by wrapping around <checkbox> by <span> (jQuery required)
Then move the class of <checkbox> up to the <span>, and defined some special styles for ie11
// IE11 or above
if(!!(navigator.userAgent.match(/Trident/) && ! navigator.userAgent.match(/MSIE/))){
$(function(){
$("input[type=checkbox]").wrap(function(){
return "<span class='" + $(this).attr("class") + " ie11'>";
});
$("input[type=checkbox]").removeClass();
});
}
On a project using jQuery UI and jQx, we are applying to all form fields the user selected theme and came across this problem :
When selecting text in input (text) fields, the background color is not the same across browsers. I know that this is browser / OS specific, however it leads to this oddity :
Chrome
IE 8 and 9
As you can see, the selected text in IE may cause problems as the selection background color blends with the rest of the element. (Why IE has this color set to white is beyond me.)
I have tried the "changing text selection color" CSS trick, but it works everywhere else than what I'm trying to change.
Is there some voodoo magic or some other poorly documented feature that can make IE behave less like... how it behaves? (And hope that IE10 really sucks less.)
Even though this question is very old I'm answering here to save anyone else trying to resolve this thinking it isn't possible. We were ready to give up and just accept this behaviour from Internet Explorer when we stumbled on the answer accidentally.
It seems that Internet Explorer uses this highlight method for selected text in any textbox that has the color set in its style - if you remove this attribute the highlighting works normally.
We stumbled accross the answer when we moved the color attribute into its own class and applied both classes to the textbox.
The following will exhibit this text selection highlighting in IE:
<input type="text" id="uiSizeWidth" class="SizeInput">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
color: #ef4915;
}
But this will not:
<input type="text" id="uiSizeWidth" class="SizeInput InputColor">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
}
.InputColor {
color: #ef4915;
}
You can then use the following CSS to style the highlighting to whatever:
::-moz-selection {
color: #fff;
background: #39f;
}
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.