0

texbox を div でラップし、クリア テキスト ボタンとプレースホルダーを追加する単純なウィジェットを JQuery で作成しました。http://jsfiddle.net/BpkDN/でこのための主要なビットを追加しました。CSS で見つけられない何かが、ie7 でスタイリングを台無しにしています。他のすべてのバージョンで動作するようです。

これが私のウィジェットが生成するものの抜粋です：

CSS:

 ::-ms-clear {
      display: none;
  }
.jui-textbox {
    border: 1px solid #DADADA;
    position: relative;
    padding:0 !important;
    white-space: nowrap;
    background: #fff;
    overflow: hidden;
    height: 33px;
    line-height: 33px;
    display: inline-block;
    *display:inline;
    margin: 10px 0;

}

.jui-textbox input {
    background-color: transparent;
    color: #313131;
    height: 33px !important;
    line-height:33px\9;
    width: 300px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    padding: 0;
    margin: 0 5px !important;
    border: none;
    float:left;
}

.jui-textbox-placeholder {
    position: absolute;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    color: #A1A1A1;
    height: 33px;
    line-height: 33px;
    padding: 0;
    margin: 0;
    left: 5px;
    overflow: hidden;
    cursor: text;
}


.jui-textbox-hover {
    border: 1px solid #CACACA;
}
.jui-textbox-active {
    border: 1px solid #a1a1a1;
}

.jui-textbox-clear.show{
    display:inline-block !important;
    *display:inline !important; 
}
.jui-textbox-clear {
    display:none;
    cursor: pointer;
    background: #fff;
    border-left: 1px solid #a1a1a1;
    width: 33px;
    height: 33px;
    background-image:url(icons/x.png);
    background-position:center;
    background-repeat:no-repeat;    
}
.jui-hoverable:hover,.jui-hoverable-hovered
{   background-color: #f1f1f1;}

textarea:focus, input:focus{
    outline: none;
}

HTML

<div class="jui-textbox">
    <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">                                                
           Default
    </div>
    <input type="text" style="width: 300px;">
    <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>
4

2 に答える 2

1

これを試して：

CSS:

 ::-ms-clear {
      display: none;
  }
.jui-textbox {
    width: 300px;
    border: 1px solid #DADADA;
    position: relative;
    padding:0 !important;
    white-space: nowrap;
    background: #fff;
    overflow: hidden;
    height: 33px;
    line-height: 33px;
    display: inline-block;
    /**display:inline;*/
    margin: 10px 0;
}

.jui-textbox input {
    background-color: transparent;
    color: #313131;
    height: 33px !important;
    line-height:33px\9;
    width: 300px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    padding: 0;
    margin: 0 5px !important;
    border: none;
    float:left;
}

.jui-textbox-placeholder {
    position: absolute;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    color: #A1A1A1;
    height: 33px;
    line-height: 33px;
    padding: 0;
    margin: 0;
    left: 5px;
    overflow: hidden;
    cursor: text;
}


.jui-textbox-hover {
    border: 1px solid #CACACA;
}
.jui-textbox-active {
    border: 1px solid #a1a1a1;
}

.jui-textbox-clear.show{
    display:inline-block !important;
    *display:inline !important; 
}
.jui-textbox-clear {
    display:none;
    cursor: pointer;
    background: #fff;
    border-left: 1px solid #a1a1a1;
    width: 33px;
    height: 33px;
    background-image:url(icons/x.png);
    background-position:center;
    background-repeat:no-repeat;
    position: absolute;
    right: 0;   
}
.jui-hoverable:hover,.jui-hoverable-hovered
{   background-color: #f1f1f1;}

textarea:focus, input:focus{
    outline: none;
}

HTML:

<div class="jui-textbox">
        <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
                Default
        </div>
        <input type="text" style="width: 300px;">
        <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
    </div>
    <br/>
<div class="jui-textbox">
        <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
                 Focused
        </div>
        <input type="text"  style="width: 266px;">
        <div class="jui-textbox-clear jui-hoverable jui-icons-x show"></div>
</div>

IE7 (Vista) でテスト済み。

デモ: http://jsfiddle.net/PENFT/

別の解決策ですが、あまりきれいではありません。

  • widthから削除して.jui-textboxいます。

  • />float:left;で追加・".jui-textbox"変更。<br/><br style="clear:both"

注： <br style="clear:both" />とても汚いです。

于 2013-07-30T23:45:37.397 に答える
0

この場合、IE7 では :focus が機能しないため、JavaScript が単純なハックです。ie7-js プロジェクトを見てください。

IE7.js は、Microsoft Internet Explorer を標準準拠のブラウザーのように動作させるための JavaScript ライブラリです。多くの HTML と CSS の問題を修正し、透過 PNG が IE5 と IE6 で正しく動作するようにします。

MSIE5.5-7 をアップグレードして、MSIE8 と互換性を持たせます。

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

この SO questionも参照できます。IE7 はこの疑似クラスをサポートしていません。

于 2013-07-30T23:38:54.747 に答える