[
[返信する]]
アンケートのチェックボックスにレ点が付かない
by な
2019-08-22 07:28
閲覧ありがとうございます。検索しましたが適当なものがヒットしなかったので立てさせて頂きました。既存でしたら誘導をお願い致します。
アンケートのチェックボックスにレ点が入らず困っています。レ点が付かないと言うだけでアンケートの機能自体には問題なく、投票もきちんとできるのですが、閲覧する側からすれば本当にチェックが入っているのかどうかも不明で、不親切でしかないのではと思いこちらにご相談させて頂きました。
恐らくHEADが原因だと思うのですがお恥ずかしながらタグなどの方面に大変弱く、どこを触ればいいのか見当もつかない次第です。
当方Androidから確認しました。機種的な問題であればどうしようもないのかなと思うんですが……。
以下がHEADになります。
<link href="http://fonts.googleapis.com/css?family=Comfortaa:300" rel="stylesheet" type="text/css">
<style type="text/css">
<!-- body{
line-height: 20px;
font-size: 11px;
width: 100%;
padding: 0px;
margin: 0 auto;
letter-spacing: 2px;
background-color: #fff;
color: #000;
font-weight: 300;
font-family: "Comfortaa", "メイリオ";
}
#wrap{
width: 100%;
max-width: 320px;
margin: 20px auto;
}
a{
color: #00afcc;
text-decoration: none;
}
a:hover{
color: #007ab5;
}
#box{
border: solid 2px rgba(234,237, 247,0.5);
border-radius: 3px;
padding: 0 1.5em 1.5em;
margin:0 1.5em 0;
}
#box2{
background: rgba(243,243,243,0.3);
padding: 1em;
margin: 0 1.5em 0;
}
#menu a{
font-weight: bold;
color: #007ab5;
}
#menu a:hover{
color: #bbc8e6;
}
strong{
font-weight: normal;
border-bottom: solid 1px #a0d8ef;
}
input,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
width: auto;
height: auto;
padding: 4px;
margin: 1%;
font-size: 11px;color: #000;
background: #e7e7eb;
border: solid 1px #e7e7eb;
border-radius: 3px;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family: "Comfortaa", "メイリオ"; }
textarea, select{
width: auto;
height: auto;
padding: 4px;
margin: 1%;
font-size: 11px;
color: #000;
background: #e7e7eb;
border: solid 1px #e7e7eb;
border-radius: 3px;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family: "Comfortaa", "メイリオ";
}
--></style>
わかる方いらっしゃいましたら、何卒ご教示のほどよろしくお願い致します。
pc
[編集]
by to
2019-08-23 15:50
-webkit-appearance: none;
これがチェックボックスに適用されているからレ点が消える。同じようにセレクトにも適用されているからセレクトの矢印も消えているはず。
input,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
のところを
input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
と書き換えれば、チェックボックスに-webkit-appearance: none;は適用されなくなる。
同様に
textarea, select{
のところを
textarea{
と書き換えればセレクトにも適用されなくなる。
-webkit-appearance: none;を適用するグループと適用しないグループに分けて整理すると
textarea,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
width: auto;
height: auto;
padding: 4px;
margin: 1%;
font-size: 11px;color: #000;
background: #e7e7eb;
border: solid 1px #e7e7eb;
border-radius: 3px;
-webkit-box-shadow: none;
-webkit-appearance: none;
font-family: "Comfortaa", "メイリオ"; }
input[type="checkbox"], select{
width: auto;
height: auto;
padding: 4px;
margin: 1%;
font-size: 11px;
color: #000;
background: #e7e7eb;
border: solid 1px #e7e7eb;
border-radius: 3px;
-webkit-box-shadow: none;
font-family: "Comfortaa", "メイリオ";
}
となる。
チェックボックスとセレクトには-webkit-appearance: none;が適用されなくなりデフォルトに近くなるからデザインは変わりますがレ点や矢印が消えるよりマシなんじゃないでしょうか。
pc
[編集]
by な
2019-08-23 19:10
to様
迅速かつ大変丁寧な解決策をありがとうございました。仰る通りに書き換えましたところ、(チェックボックスではなくラジオボタンに変わりましたが)チェックもきちんと表示されるようになり、無事に解決いたしました。大きなレイアウト崩れもなく、大変助かりました。本当にありがとうございました。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2019-08-22 07:28
pc
戻る
]