I have the following two form fields. They have the same width so they should be displayed aligned and they do so except for Google Chrome. In Google Chrome, the textarea has a little more width. Please help me out in fixing it. Thanks
<input name="phone" type="text" id="phone" style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px; margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<textarea
name="message"
cols="38"
rows="12"
id="message"
style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
onFocus="if(this.value==this.defaultValue)this.value='';"
onBlur="if(this.value=='')this.value=this.defaultValue;">
Message
in the code you posted your text area has a width:38px; did you mean to have width:385px; to match the width of the input field? you may also want to include a reset.css
I suspect that 38px in the style for the textarea element is a typo and should be 385px, otherwise you would the area as narrow on all CSS-enabled browsers. And I suspect that in the real code, there is something that causes a line break between the input and textarea elements; otherwise it is difficult to compare their widths.
The reason why the textarea is slightly wider on Chrome is that by the browser stylesheet for WebKit-based browsers, textarea elements have 2px padding. You can see this if you use the Inspect element tool of Chrome (via right-clicking) and view “Metrics” there.
The apparent solution is then textarea { padding: 0; }. But since the padding is actually useful, it might be better to set
textarea, input { padding: 2px; }
You seem to be sizing the input element using the size attribute and using cols in your textarea.
You also are defining two styles: width:385px and width:38px (the inequality is probably your problem). I'm not sure which takes precidence (size or cols), but why not avoid confusion and just set equal an width for both elements and just remove the size and row/col definitions?
Related
I have an input of type search that I am trying to resize the height of. The height is never actually reflected unless I apply a border to the element. I have tried using line-height, font-size, min-height,max-height, and the height attribute on the element itself, nothing seems to work. Is there any way to resize the search box without applying a border?
#search{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
}
#searchborder{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
border:1px solid black;
}
<input id="search" type="search">
<input id="searchborder" type="search">
Update
So after checking on a Windows Machine it seems like the search input is rendering properly, for reference here is what I'm seeing on my Mac.
Any way to make this render properly on OSX?
Much of the time these two CSS/HTML snippets alone function the exact same and have height applied. The only difference is you can see the border on the #searchborder input.
However, search inputs can be rendered differently in different OS and Browsers. Webkit can be tricky with OSX. See the following article about styling CSS search inputs:
https://css-tricks.com/webkit-html5-search-inputs/
A suggestion at the bottom of that page would be to remove the webkit appearance by adding a CSS line and then the height will be applied:
#search{
-webkit-appearance: none;
display:block;
width:90%;
margin:10px auto 0;
height:50px;}
I'm using a 4 digits password; the dots that represent each character are too small; I would like to increase the font-size; but I don want to change the input size.
This is what I have:
<input class="pin_code" type="password" maxlength="4"/>
If I add
<input class="pin_code" type="password" maxlength="4" style="font-size:30px"/>
Then the input also increases the size; how can I make only the text/dots to get bigger??
I added
<input class="pin_code" type="password" maxlength="4" style="font-size:30px; height:24px"/>
And now I get this :
I believe that you can't achieve what you want easily. The input text field element seems to be a special element, the height of it will be automatically increased accordingly to the font-size, limiting the height of course will make the middle text line go bottom-wards and look ugly indeed.
To solve this I think we have to clip off the top and bottom part (with an equal distance) and just let the middle part show (together with the text line). To clip off it, we need a wrapper around the input field, position the input field appropriately and set overflow:hidden for the wrapper. Here are the code details:
HTML:
<span class='input-clipper'>
<input class="pin_code" type="password" maxlength="4"/>
</span>
CSS:
.pin_code {
font-size:40px;
position:absolute;
width:100%;
top:50%;
-webkit-transform:translateY(-50%);
left:0;
outline:none;
}
span.input-clipper {
display:inline-block;
position:relative;
height:20px;
width:200px;
overflow:hidden;
border:1px solid black;
}
NOTE: To style the border, you have to style the border of the wrapper (.input-clipper) instead. You also set the size of the wrapper instead of setting the size of the input field (as before). Please test the demo using webkit-based browser (Chrome, Opera) because I just used -webkit- prefix for the transform property. I'm a little lazy to include all the possible prefixes.
Working Demo.
Update: The demo above shows an issue that the caret height fills the whole height of the input, to reduce the caret height, we can use a small trick with :before and :after pseudo-elements. Here is the Updated Demo.
Remaining Issue: You can't style the border of the input in the :focus state with just CSS, of course you can style it if using javascript.
I think there is a high propability that we have a better solution related to font icons or special characters, ... but I'm not good at that part. Hope someone will post it here.
set height for the input and set the font-size. it will work.
css
input{
height:24px;
font-size:32px;
}
http://jsfiddle.net/W4Ver/
Something like this ?
http://jsfiddle.net/t6Cxz/
input[type="password"]
{
font-size:30px;
height:30px;
line-height:30px;
width:50px;
}
Updated fiddle with width: http://jsfiddle.net/t6Cxz/3/
I have the following padding: padding:12px 24px; for input button and label for checkbox.
Font is set in body 16px Arial, all other font sizes inherited. border:0; for all elements. Why do browsers add 1px to button's height? So if label's height is 42px - button's height is 43px. This happens in Chrome and Firefox.
How to make the same height for buttons and labels?
Part of code
<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label>
<input type='submit' value='Sign in' id='signin-button' /> (in the HTML form)
Try adding line-height: 17px; , sorry if you have already tried line height.
Not sure, but it probably comes down to line-heights of the fonts and how they're handled in different elements in HTML.
Try forcing a height with CSS like so:
#signin-button { height: 42px!important; border: none!important; overflow: hidden; }
I'm usually against setting exact heights for elements as a general rule, but for this case, it might just do the job and be appropriate.
Good luck.
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.
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;
}