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">
Related
Please find below the code:
.spc {
white-space: nowrap;
}
<textarea class="spc"></textarea>
With the above code when I Start typing spaces into the textarea field in IE 11 Notice that the cursor doesn't move.
This problem does not occur in Chrome.
Could you please explain what might be the reason for this?
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder in HTML5. It works perfectly, except for one thing.
If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?
I have added a screenshot of two inputfields where the placeholders have an font-size of 20px
Jsfiddle: https://jsfiddle.net/bvwdg86x/
The input and its placeholder must have matching font styles
input {
display: block;
width: 400px;
padding: 0 20px;
}
input,
input::placeholder {
font: 20px/3 sans-serif;
}
<input type="text" placeholder="Example Input">
A note about placeholder accessibility
The screenshot included in the question shows the placeholder values being used as labels. This technique may be problematic for users of assistive technology and is considered an accessibility anti-pattern.
From W3C › WAI › Placeholder Research › Avoid use of placeholder values:
A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description -- it acts similar to fallback content.
See also:
Don't Use The Placeholder Attribute - Smashing Magazine
Placeholders in Form Fields Are Harmful - Nielsen Norman Group
Placeholder Attribute Is Not A Label! - Web Axe
Does using a placeholder as a label comply with WCAG 2? - Stack Overflow
Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off.
You also might consider adding placeholder styles for other browsers...
::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {} /* Firefox 18- */
:-ms-input-placeholder {} /* IE */
You have to add 'overflow: visible' to the placeholder in your css to get rid of the cropping.
::placeholder{
overflow: visible;
}
input {
width: 450px;
padding: 0px 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 25px;
line-height: 4;
}
<input type="text" placeholder="My Cool Placeholder Text">
Meanwhile, the browser vendors implemented the ::placeholder CSS pseudo-element.
You can find the current state of browser compatibility on caniuse.com.
Currently (2019-04-29) there are following notes:
::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)
::-ms-input-placeholder for Edge (also supports webkit prefix)
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 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.