ホームページ > 記事 > ウェブフロントエンド > HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介
HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介
- 寻∝梦オリジナル
- 2018-09-03 17:12:3922223ブラウズ
この記事では、HTML ボタン タグのスタイル設定と、HTML ボタン タグの美化スタイルを主に紹介します
まず、HTML のラベル スタイル設定について説明します。
通常のボタンの設定:
input要素のtype属性を「button」に設定して通常のボタンを作成します。ボタンに表示されるテキストは、value 属性の値です。value 属性が指定されていない場合は、空のボタンが作成されます。例:<input type="button" value="立即购买">
<form name="buy" action="form.html" method="post">
<button onClick="submitForm(buy)">立即购买</button>
</form> ここでボタンをクリックすると、onClick イベントがトリガーされ、イベント処理関数 submitForm(buy) が呼び出されます。パラメーター buy は、処理されるフォームの name 属性の値です。ボタンをクリックした後にフォームを送信したい場合は、イベント ハンドラー関数でフォーム オブジェクトの submit() メソッドを呼び出すことができます。
function submitForm(f) {
f.submit();
}
これはデフォルトの設定です。次に、スタイルの設定を見てみましょう。 HTML ボタン タグの場合:
完全なコード例を示します:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
display: inline-block;
padding: .3em .5em;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px black;
color:white;
font-weight: bold;
}
.div:active{
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html> この効果は図に示すとおりです:
HTMLドロップダウンメニューの作り方は？ HTMLドロップダウンメニューのコード例の紹介
HTMLラジオボタンをデフォルトで選択させるにはどうすればいいですか？ inputタグのラジオボタン使用例
以上がHTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。