HTMLボタンのボーダー

私は、ページが読み込まれたときにデフォルトでフォーカスされているボタンであることをクライアントが見ることができるように、ボタンを区別しようとしています。このデザインでは、ボタンの周りに簡単な境界線が必要です。私はそうのように私のCSSで定義されbuttonとbutton1を持っている：HTMLボタンのボーダー

.button 
{ 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #003366 
} 

.button1 { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #003366 
border: #00ffff; 
border-style: solid; 
border-width: 2px; 
}

私が注力しようとしているボタンは、デフォルトのフォーマットを失います。どのようにしてこれを修正すれば、ボタンの周りの枠線が太くなるだけで、書式設定が維持されますか？また、境界線を長方形の枠線にするのではなく、ボタンの形の周りに単に囲むようにする方法はありますか？

ここ

は私のボタンがどのように見えるかの画像です：この場合

enter image description here

、私はJail Addressボタンを集中しようとしています。「：5pxの国境半径」：

入力ボタンのHTMLは非常に似ているいくつかのブラウザ（すべてではない）で使用できますが

<input type="reset" class="button" name="refresh" value="Refresh"> 
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'"> 
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'"> 
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">

出典

2012-01-18 raphnguyen

border-color：＃00ffff; - それは違いを生むかもしれない – Silvertiger

ありがとう！それがトリックでした。そのような愚かな監督。 – raphnguyen

デフォルトで境界線は、長方形になるだろうあなたは（それが透明性を維持するため、PNG形式が好ましい）にもちょうどあなたが望むボタンで画像を作成し、代わりにそれらを使用することができ

http://www.css3.info/preview/rounded-border/

角丸

を取得します

.button1 { 
    background-image:url('paper.gif'); 
    background-repeat: no-repeat; 
    cursor: hand; 
}

私はそれを単にimg src =の代わりに使用します。次に、javascriptで「on mouseclick」を追加することができます。単なるオプションです。また、カーソルが実際にボタンの上を移動しているように変更することもできます:)

出典

2012-01-18 19:46:15 Silvertiger

私はそれを打ち負かす...そしてあなたはもっと多くの情報を与えてくれました。画像を使った実装の詳細が素敵です。 –

ありがとう。私は、この例では、丸められたボーダーはあまり重要ではないと思います。私はちょうど 'button'クラスのデフォルトのフォーマットを維持し、ボタンの周りに境界線を置いておきたいと思います。現在、ボタンのラベルはデフォルトで黒に戻っています（青色でなければなりません）。また、境界線もデフォルトで黒になります（赤色でなければなりません）。私たちのウェブページは単純にデフォルトのHTMLの 'button'クラスを使用しているので、ボタンのイメージを作ることは理想的ではないようです。 – raphnguyen

ボタンが機能しない理由は、クラスの周りに引用符を追加していないからです。その意図的でしたか？ – Silvertiger

ボタンのようなUI要素のデフォルトのスタイル設定は、ユーザーエージェント定義です.AFAIKには境界設定がありませんCSS3のborder-radiusを使わずにボタンの輪郭をたどることができます。おそらく、あらかじめ定義された図形を持たないボタンには別の要素を使用するか、必要に応じてborder-radiusを使用するか、必要な図形を持つ背景画像を使用する必要があります。

出典

2012-01-18 19:50:14

ボタンborder:xのスタイルを設定すると、少なくともSafariとFirefoxではボタンのレンダリングが完全に変更されるようです。ここで私はちょうど効果を実証するために使用される小さなテストファイルです：

buttons example rendered in Firefox

とSafariで：

MacOSの上のFirefoxでレンダリング

<html> 
    <head> 
    </head> 
    <body> 
    <form> 
     <input type="submit" value="no border"/> 
     <input type="submit" value="border:0" style="border:0;"/> 
     <input type="submit" value="border:2" style="border:2;"/> 
     <input type="submit" value="width:8rem" style="width:8rem;"/> 
    </form> 
    </body> 
</html>

が、それはこのようになります

したがって、動作は境界線の値とブラウザの両方に依存しているようです。私には奇妙に見えますが、そこにはあなたがいます。私はこれが元の質問に記載されている効果を説明していると思います。

出典

2014-03-22 07:41:16

IEでは動作しません。だから、私はこの解決策が普遍的であるとは思わない。 – Intacto

HTMLボタンのボーダー

答えて

関連する問題