CSSでの丸められた入力フォームの作成方法

まず、次のコード例を使用して基本的な丸められた入力フォームを作成する方法を見てみましょう。

HTMLコード:

<input type="text" class="rounded-input" placeholder="名前">

CSSコード:

.rounded-input {
  border-radius: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

上記のコードでは、border-radiusプロパティを使用して入力フォームの角を丸めています。paddingプロパティを使用して入力領域の内側の余白を設定し、borderプロパティを使用して境界線を追加しています。

次に、異なる種類の丸められた入力フォームを作成するためのいくつかのオプションを見てみましょう。

背景色の設定:

.rounded-input {
background-color: #f2f2f2;
/* 他のスタイルプロパティ */
}

ホバーエフェクトの追加:

.rounded-input:hover {
background-color: #e9e9e9;
/* 他のスタイルプロパティ */
}

アイコンの追加:

<div class="input-container">
<i class="fa fa-user"></i>
<input type="text" class="rounded-input" placeholder="名前">
</div>

.input-container {
position: relative;
}
.input-container i {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}

上記のコードでは、Font Awesomeアイコンを使用して入力フォームの前にアイコンを追加しています。

これらはいくつかの例ですが、CSSを使用してさまざまなスタイルの丸められた入力フォームを作成することができます。デザインの要件や好みに応じて、これらの例をカスタマイズしてください。

このような方法で、丸められた入力フォームを作成することができます。これはウェブデザインにおいて見栄えの良い要素であり、使いやすさと視覚的な魅力を提供します。