4

だから私はこのコードで送信ボタンを持っています:

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

私が持っているCSSの：

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

しかし、問題は、画像 (h:40px と w:40px を持つ) が 20px のボタンに合わせて縮小されないことです...これに対する解決策はありますか?? (できればjavascriptは使わない)

編集：現在作業中。履歴とキャッシュを削除するだけで機能します... ty

4

7 に答える 7

1

ボタンを送信してスタイルを設定するには、スパンをラップする必要があります。

デモhttp://jsfiddle.net/H5dmd/2/

HTML

<form method="post">
    <span class="icon">
        <input name="submit" type="submit" value=" "/>
    </span>
</form>

CSS

input[type=submit]{
    background:transparent;
    width:20px;
    height:20px;
    border:none;
    padding:none;
    cursor:pointer;
}
.icon{
    float:left;
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;        
}
于 2013-06-05T08:31:08.080 に答える
1

ボタンに ID を追加し、画像を更新します。

document.body.onclick=function(e){
    debugger;
    var bid=document.getElementById('bid');
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}

ここでjsフィドル。

于 2013-06-05T08:28:47.523 に答える