ホームページ >ウェブフロントエンド >CSSチュートリアル >テキストボックスにクリアボタンを設定する方法
テキストボックスにクリアボタンを設定する方法
- 不言オリジナル
- 2018-12-04 16:57:525679ブラウズ
テキスト ボックスの右側に×の付いた円が表示されることがありますが、これは実際にはクリア ボタンです。では、このクリア ボタンをテキスト ボックスに実装するにはどうすればよいでしょうか。次の記事では、テキストボックスにクリアボタンを設定する方法を紹介します。
まずはクリアボタンの具体的な設定例を見てみましょう
コードは次のとおりです
HTML code
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
<!--
function ClearButton_Click(){
this.searchForm.searchBox.value="";
}
-->
</script>
</head>
<body>
<form action="" name="searchForm">
<div class="searchFrame">
<input type="text" id="search" name="searchBox" value="" class="inputBox"/>
<div class="clearButton" onclick="ClearButton_Click()"></div>
</div>
</form>
</body>
</html>CSS code
style.css
.searchFrame{
position: relative;
display: inline-block;
}
.inputBox{
padding-right: 20px;
width:120px;
}
.searchFrame .clearButton{
width: 13px;
height: 13px;
position: absolute;
right: 2px;
top: 1px;
background: url(img/d.jpg) no-repeat left center;
cursor: pointer;
}Description
上記のコードでは、「searchFrame」フレームを周囲に用意します。テキストボックス。 「searchFrame」枠の右端にクリアボタンを配置します。正しいプロパティを設定して、スタイルシートの右端に配置します。 「searchFrame」フレームは「display:inline-block」で指定されており、テキストボックスをしっかり囲むフレームです。
実行結果
ブラウザ上に次のような効果が表示されます
次のように使用できます。通常のテキストボックス 文字を入力します。マウスポインタを右端の[×]アイコンに移動すると、ポインタの形状が変化します。このとき、クリックするとテキストボックスの内容が削除されます。
この記事はここで終わります。関連する興味深いコンテンツについては、php 中国語 Web サイトの CSS ビデオ チュートリアル 列にアクセスしてください。さらに勉強してください！ ！ ！
以上がテキストボックスにクリアボタンを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。