1

フォームの送信ボタンのデザインを制御したいのですが、フォーカスのあるアウトライン（周囲の青い境界線）を削除したくありません。Firefoxに問題があります。

多くの人がタブを使ってフォームに記入するので、アクセシビリティにとって重要だと思います。アウトラインは、何が選択されているかを確認するための方向性を示します。

重要なのはボーダーだと思います。デザインをコントロールするには、ボーダーにcssを付けるべきだと思います。ボーダーがない場合も同様です。Firefoxで境界線を付けると、輪郭が消え、醜い点線が表示されます。::-moz-focus-inner {border：0;}でその行を取り除くことができますが、Firefoxだけに影を付ける方法がわかりません。

したがって、問題は次のとおりです。

  • Firefoxを含め、すべてのブラウザで機能する別の方法で送信ボタンのデザインを制御できますか？

  • Firefoxで機能するアウトラインまたはシャドウを指定するにはどうすればよいですか？

ここに例があります：http：//jsfiddle.net/56mfx/15/

CSS：

input[type="submit"] {    
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
}​

HTML：

<input type="submit" name="submit" value"send" id="submit">​
4

3 に答える 3

1

これがカスタム送信ボタンです。画像もご利用いただけます。

HTML：

<input type="submit" value="Submit" class="submit" />

CSS：

.submit{
    background:#BDBDBD;
    height:30px;
    width:100px;
    border:none;
    color:#2E2E2E;
    font:family:Arial;
    font-weight:bold;
    font-size:15px;
    cursor:pointer;
}

.submit:hover{
    background:#DF01D7;
}
于 2012-11-02T12:57:17.760 に答える
0

ご存知のとおり、を作成して<div>からフォームを送信してもらうことができます。

<div class="sbmtBtn" onmouseup="document.forms['myform'].submit()">Submit</div>

そしてそれをスタイリングします

.sbmtBtn{
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
    /* Use the following to set a shadow only in FF */
    -moz-box-shadow: 0 0 3px #000000;
}

私はより多くのコントロールを持っているので、私は常に<div>ボタンとしてを使用することを好みます。

于 2012-11-01T15:50:02.650 に答える
0

次の方法で解決できます。

input[type="submit"] {    
     width: 80px;
     height: 25px; 
     color: #fff;
     background-color: #ccc;
     border:solid thin #ddd;
     outline: none;

     -moz-box-shadow: 0 0 3px #333;

     /* or for outline:
     -moz-outline: 1px solid #c00;
     */
}
于 2012-11-02T11:17:11.647 に答える