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)
Related
The context is I need to use select elements built from a framework that I would prefer not to change (respectively jqxComboBox and jqxDropDownList from jQWidgets), and use their built-in placeholders.
jqxComboBox creates an inner input for that with the attribute placeholder="my text", so it gets styled correctly in browser-dependant placeholders gray.
However jqxDropDownList creates an inner span with the attribute unselectable="on" that by default appears in the page's font color.
I'd like to style the jqxDropDownList accordingly, but the gray changes following the browser. Is there a consistent way to obtain the placeholder color that uses the browser, without having to declare a different rule for every one?
example: this gray is nice for Firefox, but not on Chrome (the difference might seem small here, but it is accentuated with our CSS).
body {
font-weight: bold;
}
input { /*just for the example*/
width: 100%;
}
input::placeholder { /*just for the example*/
font-weight: bold !important;
}
span[unselectable="on"] {
color: #777777 !important;
}
<input style=type="textarea" placeholder="native browser placeholder color"><br>
<span unselectable="on">testing placeholder color emulation</span><br>
<span>what I have currently in my jqxDropDownList</span>
EDIT: partially solved my problem by overriding placeholders color for all browsers following this post's accepted answer, but still interested for the sake of pure knowledge..
Try using color: unset to use the default color for given element.
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 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 have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/