I've faced an issue with input (type search) in Google Chrome and other browsers. Please take a look on the basic HTML code:
<input type="search" placeholder="Search">
and CSS:
input {
height: 30px;
font-size: 16px;
}
JSFiddle Example. The problem is that the placeholder is not aligned well vertically in some browsers:
Google Chrome (v. 55.0.2883.87 m):
Mozilla Firefox (v. 45.0.2):
Internet Explorer (v. 11.576.14393.0):
Opera (v. 42.0.2393.94):
But it's displaying correctly (as I want it to be displayed) in:
Edge (v. 38.14393.0.0):
Safari (for Windows v. 5.1.7 7534.57.2):
I would be happy to place it precisely at the middle, please help to achieve this. Thank you!
UPD:
I've tried:
Resetting CSS;
Setting line-height;
Set paddings;
::-webkit-input-placeholder selector to set height / line-height;
It maybe problem with font-family. Today I've spent 6 hours to fix the same problem on Android. Eventually this was font "HelveticaNeueCyr" problem. The font has a gap on Android devices only which impossible to fix with css.
I changed to Arial and fixed it.
Add line-height to CSS:
input {
line-height:30px;
height: 30px;
font-size: 16px;
padding: 1px 0;
}
Modify line height because you use padding.
Related
Junior developer here. I am currently having issues with rounded corners in Safari. I have seen that other people have been having this issue as well. Rounded corners is working in Firefox & Chrome but not Safari. It is currently affecting more than one section of the page. The current code for one of them is:
#portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 35px auto;
list-style: none;
text-align: center;
border-radius: 1rem;
padding: 2px 15px;
outline-style: solid;
outline-color: #F10086;
}
I have tried using "px" as well as "em" to no avail. I have tried using -webkit-appearance: none;, overflow:hidden, and I can't seem to find anything on google to help fix this problem. I will attach photos for reference. The first photo is how it appears in Google Chrome & Firefox (the correct way).
Rounded Corners
Here is how the corners appear in Safari. It also appears this way on mobile devices regardless of browser.
No Rounded Corners
Any help would be great. I hope I have described this well enough.
Thanks
This is currently a bug in Safari, which will hopefully be fixed soon, where border-radius does not affect outline. There is a workaround posted here, but it is quite hacky and should only be used if you really need to use an outline instead of a border.
I'm using an input type="number" in my html and it looks great in Chrome (v66), but no with Firefox (v60). Here are the results:
Using Google Chrome:
Using Mozilla Firefox:
How could I fix it with Firefox?
Thanks!
Chrome and Firefox have pre-built visual variations on the user-forms (and some other things as well).
Best way to avoid this from happening is to simply style your own unified looks using css. For example:
input[type="number"] {
// whatever style you want, i'll go with basic box as an example
border: 1px solid black;
width: 50px;
height: 30px;
}
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.
So, I have this piece of HTML here:
<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>
The important CSS elements applied here are:
input {
height: 2em;
padding: 0.2em 0.5em;
width: 100%;
/* avoid iPhone rounded corners */
border: 1px solid #afb7c1;
border-collapse: collapse;
border-radius: 0 0 0 0;
}
.input-number {
text-align: right;
}
Which should render like this:
The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:
All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".
Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?
Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:
input[type="number"]::-webkit-outer-spin-button { display: none; }
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT
Live demo: http://jsbin.com/aviram/5/
Hope it help.
While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...
A better solution (for my use-case) was found here:
Disable webkit's spin buttons on input type="number"?
It consists of these CSS styles:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...
Not sure if this helps, but try to add these lines to the input css
-webkit-box-sizing: border-box;
box-sizing: border-box;
I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:
input[type=number] {
max-inline-size: none; /* chrome 71 */
max-width: unset; min-width: unset; /* iOS12 */
}