コピペでできるフォームのデザインサンプル一覧[HTML/CSS]

2023年9月29日2023年9月30日

用途　

・

フォームのデザインサンプル一覧

デフォルト

<form action="sample.php" method="POST">

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="name">氏名</label></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="gender">性別</label></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="phone">電話番号</label></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="email">メールアドレス</label></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="message">お問い合わせ内容</label></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"><label for="email">返信の有無</label></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-1" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-1">希望しない
</div>

<div class="t8-form-1">
<div class="t8-formarea-1"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-1 {
    display: block;
    align-items: center;
    padding: 20px;
    
}

.t8-form-1:last-child {
    border-bottom: none;
}

.t8-formarea-1 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-1 form {
    width: 70%;
    margin: 0 auto;
}

.t8-radio-1{
    margin-left: 10px;
    margin-right: 5px;
}

シンプル

<form action="sample.php" method="POST">

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="name">氏名</label></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="gender">性別</label></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="phone">電話番号</label></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="email">メールアドレス</label></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="message">お問い合わせ内容</label></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"><label for="email">返信の有無</label></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-2" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-2">希望しない
</div>

<div class="t8-form-2">
<div class="t8-formarea-2"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-2 {
    display: flex;
    align-items: center;
    padding: 20px;
    
}

.t8-form-2:last-child {
    border-bottom: none;
}

.t8-formarea-2 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-2 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-2 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-2 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-2 label {
    font-weight: bold;
}

.t8-formarea-2 span {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-2 input, .t8-formarea-2 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-2 input::placeholder,
.t8-formarea-2 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-2{
    margin-left: 10px;
    margin-right: 5px;
}

シンプル(キャプション)

<form action="sample.php" method="POST">

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-3" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-3">希望しない
</div>

<div class="t8-form-3">
<div class="t8-formarea-3"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-3 {
    display: flex;
    align-items: center;
    padding: 20px;
}

.t8-form-3:last-child {
    border-bottom: none;
}

.t8-formarea-3 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-3 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-3 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-3 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-3 label {
    font-weight: bold;
}

.t8-formarea-3 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;
}

.t8-formarea-3 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}

.t8-formarea-3 input, .t8-formarea-3 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-3 input::placeholder,
.t8-formarea-3 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-3 {
    margin-left: 10px;
    margin-right: 5px;
}

サイドバー

<form action="sample.php" method="POST">

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-4" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-4">希望しない
</div>

<div class="t8-form-4">
<div class="t8-formarea-4"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-4 {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 5px solid #808080;
}

.t8-form-4:last-child {
    border-bottom: none;
}

.t8-formarea-4 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-4 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-4 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-4 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-4 label {
    font-weight: bold;
}

.t8-formarea-4 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-4 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}

.t8-formarea-4 input, .t8-formarea-4 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-4 input::placeholder,
.t8-formarea-4 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-4{
    margin-left: 10px;
    margin-right: 5px;
}

アンダーバー

<form action="sample.php" method="POST">

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-3" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-3">希望しない
</div>

<div class="t8-form-5">
<div class="t8-formarea-5"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-5 {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #808080;
}

.t8-form-5:last-child {
    border-bottom: none;
}

.t8-formarea-5 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-5 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-5 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-5 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-5 label {
    font-weight: bold;
}

.t8-formarea-5 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-5 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}
.t8-formarea-5 input, .t8-formarea-5 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-5 input::placeholder,
.t8-formarea-5 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-5{
    margin-left: 10px;
    margin-right: 5px;
}

ボックス

<form action="sample.php" method="POST">

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-6" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-6">希望しない
</div>

<div class="t8-form-6">
<div class="t8-formarea-6"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-6 {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #808080;
}

.t8-form-6:last-child {
    border: none;
}

.t8-formarea-6 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-6 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-6 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-6 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-6 label {
    font-weight: bold;
}

.t8-formarea-6 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-6 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}

.t8-formarea-6 input, .t8-formarea-6 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-6 input::placeholder,
.t8-formarea-6 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-6{
    margin-left: 10px;
    margin-right: 5px;
}

ツートン

<form action="sample.php" method="POST">

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-3" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-3">希望しない
</div>

<div class="t8-form-7">
<div class="t8-formarea-7"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-7 {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #808080;
    border-right: 100px solid #808080;
  
}

.t8-form-7:last-child {
    border: none;
}

.t8-formarea-7 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-7 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-7 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-7 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-7 label {
    font-weight: bold;
}

.t8-formarea-7 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-7 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}

.t8-formarea-7 input, .t8-formarea-7 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-7 input::placeholder,
.t8-formarea-7 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio- 7 {
    margin-left: 10px;
    margin-right: 5px;
}

ハイライト

<form action="sample.php" method="POST">

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="name">氏名</label><span class="req">必須</span></div>
<input type="text" id="name" name="name" placeholder="例) 山田　花子" required>
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="gender">性別</label><span class="opt">任意</span></div>
<select name="gender" id="gender">
<option value="">選択</option>
<option value="dog">男性</option>
<option value="cat">女性</option>
<option value="mouse">その他</option>
</select>
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="phone">電話番号</label><span class="req">必須</span></div>
<input type="text" id="phone" name="phone" placeholder="03-xxxx-xxxxx" required>
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="email">メールアドレス</label><span class="opt">任意</span></div>
<input type="text" id="email" name="email" placeholder="example@xxx.com" required>
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="message">お問い合わせ内容</label><span class="req">必須</span></div>
<textarea id="message" name="message" rows="5"placeholder="内容 " required></textarea>
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"><label for="email">返信の有無</label><span class="opt">任意</span></div>
 <input type="radio" name="contact" value="希望" class="t8-radio-3" checked>希望
 <input type="radio" name="contact" value="希望しない" class="t8-radio-3">希望しない
</div>

<div class="t8-form-8">
<div class="t8-formarea-8"></div>
<button type="submit">送信</button>
</div>

</form>

.t8-form-8 {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #808080;
    background: #000;
}

.t8-form-8:last-child {
    border: none;
}

.t8-formarea-8 {
    display: flex;
    align-items: center;
    width: 250px;
}

.t8-formarea-8 form {
    width: 70%;
    margin: 0 auto;
}

.t8-formarea-8 select {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
}

.t8-form-8 button {
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #0d6efd;
}

.t8-formarea-8 label {
    font-weight: bold;
}

.t8-formarea-8 .req {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #0d6efd;;
}

.t8-formarea-8 .opt {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #198754;
}

.t8-formarea-8 input, .t8-formarea-8 textarea {
    background-color: #808080;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    color: #808080;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 5px;
}

.t8-formarea-8 input::placeholder,
.t8-formarea-8 textarea::placeholder {
    color: #808080;
    font-size: 15px;
}

.t8-radio-8{
    margin-left: 10px;
    margin-right: 5px;
}

URLをコピーしました！