方法: 1. 「幅: 直径値; 高さ: 直径値;」スタイルを入力ボックス要素に追加し、入力ボックスを正方形に設定します; 2. 「border-radius」属性を使用して、正方形の入力ボックスを設定する 円形にするには、入力ボックスに「border-radius:100%;」スタイルを追加するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css で入力ボックスを円に設定する方法
css では、まず入力ボックスを正方形に設定してから、入力ボックスの円を設定する コーナーを使用して、入力ボックスを円形に設定できます。
現時点では、border-radius 属性を使用する必要があります。この属性の機能は、要素の丸い境界線を設定することです。
例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>123</title>
<style type="text/css">
.myinput{
width:100px;
height:100px;
border-radius:100%;
}
</style>
</head>
<body>
<input type="text" value="" class="myinput" placeholder="这是一个input"/>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで入力ボックスを円形に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます
毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます
独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AMサイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています
それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AMドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です
JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス
さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AMJavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：
アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
