I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.
Anyway, here is the code for the css. (EDIT: This is the generated css from sass)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
And here's the simple html:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair
Here are screenies of the placeholder and the input field with text input:
EDIT:
For now I have resorted to this jquery plugin.
It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)
I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)
I got the same issue.
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.
input{
text-indent: 10px;
}
If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}
line-height: normal;
worked for me ;)
Angular Material
add in the placeholder if padding did not work - but not a recommended way
<input matInput type="text" placeholder=" Email">
Non Angular Material
Add padding to your input field, like below. Click Run Code Snippet to see demo
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>
I had a problem, which appears just in internet explorer. Input field was styled
height:38px;
line-height:38px;
Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.
My solution was to set:
line-height:normal;
Setting line-height: 0px; fixed it for me in Chrome
If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:
<input type="email" placeholder=" Your email" />
Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.
I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.
In the meantime, you can resolve to the table on this page which shows different browser support for different styles.
Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.
Remove line-height or set using padding...it's working in all browser
I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine
http://jsfiddle.net/fLdQG/2/ (webkit browser required)
Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?
I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.
I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.
The placeholder is not affected by line-height and padding is inconsistent on browsers.
I have found another solution though.
VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.
I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.
... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.
If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.
Related
I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
EDIT: As #geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!
The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15.
(I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)
Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/
The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)
Am I doing something wrong or is it just not possible to style it at Chrome right now?
Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.
Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/
HTML:
<textarea><textarea> Doesn't highlight properly in Chrome.</textarea><br />
<input value="<input> Doesn't highlight properly in Chrome." />
<p><p> Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable><div contenteditable> Highlights just fine in Chrome!</div>
CSS:
textarea, input, p, div {
width: 400px;
}
#div-textarea {
-webkit-appearance: textarea;
height: 32px;
overflow: auto;
resize: both;
}
::selection {
background-color: black;
color: white;
}
Output (Chrome):
This is a known WebKit bug. Sorry, no solution thus far :)
Update: the WebKit bug was fixed on 10/13/2014.
Is there any chance that instead of using CSS pseudo-element you can use some jQuery.
take a look at this http://jsfiddle.net/J5N7K/6/.
if you don't understand the jQuery feel free to ask about it.
use this :
::-moz-selection {
background: var(--blue);
color: var(--white);
}
::selection {
background: var(--blue);
color: var(--white);
}
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.
I have an input field:
<input type="text" placeholder="whatever">
with styles:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
Thanks
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
::-webkit-input-placeholder { line-height: normal; }
Looking at your tags, I'm assuming you are writing something like...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.
EDIT: As of 2012-06-11 this bug has been finally fixed! https://bugs.webkit.org/show_bug.cgi?id=35981#c1
I have some pretty straightforward markup:
<form action="">
<fieldset class="compact">
<legend>Member Tools</legend>
<label for="username">Username</label>
<input name="username" id="username" type="text"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" />
</fieldset>
</form>
I am attempting to add a small margin to the bottom of the legend element, this works just fine in Firefox 2 and 3 as well as IE 5-8, however in Safari and Chrome adding a margin does nothing. As far as I know legend is just another block level element and Webkit should have no issue adding a margin to it, or am I incorrect?
After a bit of research I found a work-around for this that I believe to be the least "hacky" method for solving it. Using the nasty webkit targeting hacks really weren't an option, but I found that the -webkit-margin-collapse: separate property seems to work in stopping the margins on the elements from collapsing just as it describes.
So in my scenario the following fixes the issue by adding a margin to the top of the first label element (right below the legend) in the fieldset:
fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}
Not perfect, but better than nothing, other browsers should just collapse the margins normally.
If anyone is curious someone actually did file a bug report about this # 35981
https://bugs.webkit.org/show_bug.cgi?id=35981
Thanks for everyone's input.
Well, <legend> really isn't "just another block-level element." Maybe it should be, but the fact is that it inherently is going to have layout peculiarities in that it's supposed to do something pretty weird, as elements go. Between IE and Firefox, the effects of margin and padding on <legend> elements are a lot different.
Do you want to just separate <fieldset> content from the top of the box? If so, I'd try playing with padding-top of the fieldset itself.
Sorry to post an answer to such an old thread, but there's actually a pretty easy solution for this that doesn't require any hacks. All you need to do is add padding to the top of your fieldset element.
fieldset { padding: 10px 0 0; }
This might make what I'm trying to say a little more clear: http://jsfiddle.net/8fyvY/
Ive just found adding a 1px padding to the fieldset seems to make it suddenly aware of the margins it contains (the spacing created is more than 1 px).
I meet this problem and everything look fine on chrome but safari make the problem.
In that case if I add this code
fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}
I get double margin on Chrome. Then just decide to do the following
fieldset > legend + *{
padding-top:3px;
}
Hope that help. Cheers!
To get a legend working with bottom border and margin in all browsers I insert a span inside the legend, put the border on the span, set the legend margin to 0 and add padding to the bottom of the legend.
e.g.
legend {
border: 0;
margin-bottom: 0;
padding-bottom: 20px;
}
legend span {
display: block;
border-bottom: 2px solid #f0ebe6;
}