CSSの入力ボタンから不要な枠線を削除するにはどうすればよいですか?

入力ボタンから不要な境界線を削除する

Web サイトを操作するとき、ユーザーは多くの場合、データを送信するための対話型要素として機能する入力ボタンに遭遇します。またはアクションを開始します。ただし、これらのボタンをクリックしたとき、またはフォーカスしたときに、見苦しい境界線が表示されることがあります。

CSS では、アウトライン プロパティは、ボタンの周囲に表示される境界線を作成する役割を果たします。デフォルトでは、Web ドキュメント内の要素は、フォーカスされると点線のアウトラインを受け取ります。入力ボタンの場合、この輪郭は特に邪魔になる可能性があります。

解決策: 輪郭を削除する

不要な境界線を除去するには、値を none に設定して、outline プロパティを作成します。方法は次のとおりです:

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
  outline: none;
}

例

これらのスタイルを HTML 入力ボタンに適用すると、クリックまたはフォーカスするとアウトラインが削除され、クリーンでシームレスなユーザーが残ります。エクスペリエンス:

<input type="button" value="Example Button">

Chrome のメモユーザー

Chrome では、アウトラインを使用したアウトラインの境界線の削除: none;プロパティが十分ではない可能性があります。このような場合、CSS の追加行が必要です:

-webkit-appearance: none;

両方を適用 アウトライン: なし。および -webkit の外観: なし。プロパティを CSS に追加して、Chrome ブラウザに境界線が表示されないようにします。

以上がCSSの入力ボタンから不要な枠線を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。