I am trying to layer 2 inputs on top of each other in HTML. In most browsers (Safari, FF, IE7) I do this with the following code and it works fine so that the second input is placed on top of the first with the lighter text color, and when you click in the area the focus goes to it. In IE8 however, the first one appears to be over the second one, so that when you click it and start typing you see the lighter colored text.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
input {
background-color: transparent;
}
</style>
</head>
<body>
<input style="position:absolute;z-index: 1;color: #dedede;">
<input type="text" style="position:relative;z-index: 3;">
</body>
</html>
The problem seems pretty similar to that one, so I think you'll have to wrap a <input> into a <div> with higher z-index.
Related
In the following HTML, the min-height style property does nothing in (my versions of) Chrome and Safari on Mac, but does work in Firefox:
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;'>
hello
</button>
</body>
</html>
I have also noticed that the min-height property takes effect in Chrome and Safari if some other unrelated property is added to the button, such as background-color:#abc;.
Is this some known webkit bug, possibly part of a larger class of bugs I should be aware of? Or not a bug at all?
Thanks!
It's working on my side. Please try with this
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;display:inline-block'>
hello
</button>
</body>
I'm new to coding in general, and I'm just beginning to code my first website, but when I run this code in Brackets Live Preview, the page shows up blank. Not sure if I'm missing something, or if I have an error in the code. Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<title>My Finger Slipped</title>
</head>
<body bgolor="#000" text="#FFF">
<h1>My Finger Slipped</h1>
</body>
</html>
Actually your pages isn't blank just that you make your body text the color white so you think its blank. Try highlighting the page you will see that there is text there. Typically you would wanna make a separate CSS page for you HTML and link it this way you can change your whole website by just adding div and id's.
HTML
<title>My Finger Slipped</title>
</head>
<body>
<h1>My Finger Slipped</h1>
</body>
</html>
CSS
body {
background-color: #E5DAD3;
}
h1 {
color: white;
}
There is a simple example with 2 inputs. One with custom google font and another with default browser font.
https://plnkr.co/edit/kh7KbhdLjjDn6niy8rzt?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
</head>
<body>
<input type="text" value="jgyq">
<input type="text" value="jgyq" class="custom-font">
</body>
</html>
input {
font-size: 16px;
}
.custom-font {
font-family: 'Open Sans';
}
If you try to select input text and drag to top or bottom, you will notice that input text jumps 1-4px to top or bottom (depend on line-height, height input attributes actually, but jumps always)
Have tried different compinations of padding, line-height, height properties.
I used line-height:1.2; + padding:6px 0; properties to have crossbrowser input (height) in the past. Is there any other good way to set crossbrowser text input withut such jumps and other problems. (IE11+, and modern Chrome, FF, O)
Is there a way to focus on the field, but without this jarring animation? The behavior is especially bad when the keyboard is visible.
Demo
http://plnkr.co/edit/9OydOFO0KUeKuaH8u70A?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<input>
<input>
<input>
<input>
<input>
...
<input>
</form>
</body>
</html>
After some more research, this appears to be related to a focus jumping bugs in iOS. (https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#focus-jumping)
One neat trick that fixed it some instances was to set float: left; clear: left; on the input field (Jumping input fields in Safari)
But that fix doesn't work if it needs to interact with a position: fixed element. The jumping bug persists.
I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.
If i remove the font-size property from style, the effect does not appear.
Is that a browser bug, or am i doing something wrong with the style attribute ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.
I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>