コンテンツへスキップ
お問い合わせフォーム
#ask dl dd textarea.iken-textarea {
max-width: 100%;
min-height: 150px;
width: 50%;
/* 既存の青いボーダーと角丸 */
border: 2px solid #2794d9;
border-radius: 7px;
padding: 15px 20px;
box-sizing: border-box;
font-size: 1rem;
font-weight: 500;
line-height: 1.6em;
color: #222;
/* ★アウトラインをリセットしてカスタムシャドウを使う準備 */
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#ask dl dd input[type=text],
#ask dl dd input[type=number],
#ask dl dd input[type=date],
#ask dl dd select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 15px 20px;
width: 50%;
/* 既存の青いボーダーと角丸 */
border: 2px solid #2794d9;
border-radius: 7px;
box-sizing: border-box;
font-size: 1rem;
font-weight: 500;
line-height: 1.6em;
color: #222;
background-color: #fff;
/* ★アウトラインをリセットしてカスタムシャドウを使う準備 */
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* ======================================= */
/* ★★★ 追記するフォーカス時のスタイル ★★★ */
/* ======================================= */
/* テキストエリアのフォーカス時 */
#ask dl dd textarea.iken-textarea:focus {
/* ボーダー色は変えず、影で目立たせる */
border-color: #2794d9;
/* 画像の青枠のような、立体的な影を追加 */
box-shadow: 0 0 0 3px rgba(39, 148, 217, 0.5);
}
/* inputとselectのフォーカス時 */
#ask dl dd input[type=text]:focus,
#ask dl dd input[type=number]:focus,
#ask dl dd input[type=date]:focus,
#ask dl dd select:focus {
/* ボーダー色は変えず、影で目立たせる */
border-color: #2794d9;
/* 画像の青枠のような、立体的な影を追加 */
box-shadow: 0 0 0 3px rgba(39, 148, 217, 0.5);
}