1

私は現在、この問題に関して途方に暮れています。私が作っているのは WYSIWYG エディター (私が今使っているものとよく似ています) で、問題は上部のボタンです。レイアウトの CSS クラスを作成しました。

.test {
    background-color:#d0d0d0;
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none;
}

.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}

レイアウトは正常に機能しますが、クラスをリンクする適切な方法が見つかりません。これを例に取ります (JavaScript は無視してください):

<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">

<button>問題は、ボタン (<type="submit>など) が元のデザインを変形させる傾向があり、3 次元の外観になり、一般的にボタンのように見えることです。

私の質問は、どうすればこれを回避できますか? いくつかの異なる方法でクラスをリンクしようとしましたが、うまくいきません。

写真：

ボタンの結果

4

2 に答える 2

2

私は通常一緒に行きます：

html:

<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>

CSS:

.test {

    [ ... snipped your style ... ]

    position: relative;
}

.test a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
于 2012-10-23T19:22:15.733 に答える
0

cssを少しだけ調整

.test{
    background-color:#d0d0d0;
    border: 1px solid #f5f5f5;  //<--add this
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none; 
}
.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}​

入力要素またはボタン要素で動作します。ここに結果のFIDDLEがあります。

于 2012-10-23T19:48:41.650 に答える