Menu
I'm trying to recreate a pretty cool placeholder UI using only HTML and CSS, and I've almost got it (demo). However, if you type something in an input field and tab to focus on the next, the one you just entered a value into will be offset a little bit in Safari (6.0.5) and MobileSafari (iOS 6.1). It works fine in Chrome (30).
To reproduce:
So the question is: what's causing this and how can I fix it?
Note: I only really care about getting this to work in MobileSafari, anything beyond that is a bonus.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input name="title" type="text" placeholder="Title">
<input name="price" type="text" placeholder="Price">
<input name="location" type="text" placeholder="Specific location (optional)">
<textarea name="desc" rows='4' placeholder="Description"></textarea>
</body>
</html>
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-size: 0;
}
input, textarea {
position: relative;
display: inline-block;
margin: 0;
outline: none;
border: 0;
border-radius: 0;
padding: 2pt 4pt;
padding-top: 8pt;
font-family: "Helvetica Neue";
font-size: 14pt;
font-weight: lighter;
}
::-webkit-input-placeholder {
color: lightgrey;
position: relative;
top: 0;
left: 0;
-webkit-transition-property: top, color;
-webkit-transition-duration: .1s;
transition-property: top, color;
transition-duration: .1s;
}
::-webkit-input-placeholder[style*=hidden] {
color: rgb(16,124,246);
font-size: 8pt;
font-weight: normal;
top: -8pt;
opacity: 1;
visibility: visible !important;
}
[name=title] {
width: 100%;
border-bottom: 1px solid lightgrey;
margin-bottom: 1px;
}
[name=price] {
width: 30%;
margin-bottom: 1px;
border-bottom: 1px solid lightgrey;
border-right: 1px solid lightgrey;
}
[name=location] {
width: 70%;
border-bottom: 1px solid lightgrey;
}
[name=desc] {
width: 100%;
}
260
Adding this to your input and textarea element solves the problem:
float: left;
Tested on Safari Version 6.0.5 (8536.30.1) and Mobile Safari
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
