Persistent Placeholders in IE

I am styling a ms-input-placeholder with my login.aspx file for a RDWeb portal. I want to implement persistent placeholders on each username and password textInputField . How can I do that?

Here is some working/example code I added which styles my username and password fields. I cannot modify it in a way which implements persistent placeholders (placeholders that always show, even on focus, unless the textbox has text).

<style>
    .textInputField:-ms-input-placeholder {   
        color: #999999;
    }
    .textInputField:focus {
        background-color:yellow;
    }
</style>

---

Try my Jquery Plugin. The one you posted does not work properly in IE.

It will take the placeholder in text and password inputs and convert them to labels to act like placeholder and make it persistent.

This has animation with options. Available options are focusOpacity, focusSpeed, & fadeSpeed.

Just copy and paste Plugin code from Fiddle link below.

Fiddle

HTML

<input id="username" type="text" placeholder="Username">
<input id="password" type="password" placeholder="Password">

CSS

.input-wrapper input {
z-index: 9999;
font-size: 14px;
height: 20px;
border: none;
background: transparent;
position: relative;
display: inline-block;
outline: none;
}

.input-wrapper {
margin: 10px;
width: 200px;
border: 1px solid #000;
vertical-align: middle;
position: relative;
display: block;
}

.input-wrapper label {
z-index: 999;
color: gray;
font-size: 14px;
font-family: arial;
font-style: italic;
height: 20px;
line-height: 20px;
padding-left: 3px;
position: absolute; 
cursor: text;
}

Script with options

$(document).labelPlaceholder({focusOpacity:.5,focusSpeed:150,fadeSpeed:50});

Script using defaults

$(document).labelPlaceholder();

链接地址: http://www.djcxy.com/p/70580.html

上一篇: 为什么我不能覆盖现有的伪

下一篇: IE中的持久占位符