2

JSColor、カラーピッカーを使用するinputフィールドがあります。 左側のカラー エリア (テキスト フィールド) は、ボタンとして機能するライブラリから取り込まれます。
input
ここに画像の説明を入力

質問:画像領域を右側 ( ) に配置して、その下のテキスト フィールド.arrowDivをクリックできるようにすることはできますか? input意味の下にz-index

inputその理由は、テキスト フィールド以外からのクリックを検出するようにライブラリを変更できないように見えるためです。

URLの問題のため、フィドルを作成できませんでした

CSS:

.input-container {
    position:relative; border:#999 1px solid; 
    height: 38px; width: 80px;
}
.arrowDiv{ 
    position:absolute; right:0; width:38px; height:38px; display:block; z-index:2;
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2;
}

.input-container input{
    float:left; margin:0; padding:0;
    width:75px; height:38px; 
    border:none;  background:transparent;   cursor:pointer;
}

html:

<div class="input-container">
    <input class="color">
    <div class="arrowDiv"></div>
</div>
4

2 に答える 2

1

画像領域を右側 (.arrowDiv) に配置して、その下の入力テキスト フィールドをクリックできるようにすることはできますか?

確かに。

代わりにトッププロパティとプロパティを設定してみてくださいleftright

.arrowDiv{ 
    position:absolute;
    left:0;
    top:39px;
    width:80px;
    height:38px;
    display:block;
     z-index:2;
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2;
}

フィドルをチェック

CSS divサイズをアイコンのサイズに設定する

.input-container {
    position:relative;
    border:#999 1px solid; 
    height: 38px;
    width: 80px;
}
.arrowDiv{ 
    position:absolute;
    left:60px;
    top:10px;
    width:16px;
    height:16px;
    display:block;
    z-index:2;
    background: url(http://i577.photobucket.com/albums/ss218/charles2690/11.png) no-repeat scroll;
}

.input-container input{
    float:left;
    margin:0;
    padding:0;
    width:75px;
    height:38px; 
    border:none;
    background:transparent;
    cursor:pointer;
}

JS

$('.arrowDiv').click(function() {
       // code to open the color picker
});

フィドル

于 2013-07-22T20:09:48.273 に答える
1

別の要素の背後にある要素をクリックすることはできませんが、デモ ページで説明されている開閉イベントを発生させる小さなスクリプトを div に添付しました。ライブラリにメソッドがなかったのは残念だったisOpen()ので、独自の変数を保存する必要がありました。このおもちゃの台本であなたが目指していたものを手に入れたと思います。ただし、div は入力要素の値を非表示にするため、コードを微調整する必要があります。

http://jsfiddle.net/jv6b7/

于 2013-07-22T20:41:09.540 に答える