teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問IE9でのプルダウンのデザイン

編集履歴

質問編集履歴

1

cssの内容

2016/11/09 09:02

投稿

takamiii_158cm
takamiii_158cm

スコア84

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,8 @@
18
18
 
19
19
 
20
20
 
21
+ sassで書いてcssにコンパイルさせています。
22
+
21
23
 
22
24
 
23
25
  ###発生している問題・エラーメッセージ
@@ -38,129 +40,137 @@
38
40
 
39
41
  ↓これを書いても駄目でした。
40
42
 
41
- ```scss
43
+ ```css
42
44
 
43
45
  select {
44
46
 
47
+ font-size: inherit;
48
+
49
+ box-sizing: content-box;
50
+
51
+ margin: 0;
52
+
53
+ padding: 0;
54
+
55
+ vertical-align: middle;
56
+
57
+ color: inherit;
58
+
59
+ border: 0;
60
+
61
+ border-radius: 0;
62
+
63
+ background: none transparent;
64
+
45
65
  -moz-appearance: none;
46
66
 
47
67
  -webkit-appearance: none;
48
68
 
49
69
  appearance: none;
50
70
 
71
+ }
72
+
73
+
74
+
75
+ .pulldown {
76
+
77
+ overflow: hidden\9;
78
+
79
+ background: none;
80
+
81
+ }
82
+
83
+
84
+
85
+ .pulldown > select {
86
+
87
+ width: 130%\9;
88
+
89
+ /* UI分を伸ばす */
90
+
91
+ background-color: red\9;
92
+
93
+ }
94
+
95
+
96
+
97
+ ```
98
+
99
+
100
+
101
+
102
+
103
+ ここまでは反映される
104
+
105
+ ```css
106
+
107
+ .select-box-basic {
108
+
109
+ width: 144px;
110
+
111
+ height: 33px;
112
+
113
+ padding-left: 8px;
114
+
115
+ border: solid 1px #bfbfbf;
116
+
51
117
  border-radius: 0;
52
118
 
119
+ background: url(../images/arrow.png) no-repeat;
120
+
53
- border: 0;
121
+ background-color: #fff;
54
-
55
- margin: 0;
122
+
56
-
57
- padding: 0;
58
-
59
- background: none transparent;
123
+ background-position: 90% 50%;
60
-
124
+
61
- vertical-align: middle;
125
+ -webkit-appearance: none;
62
-
126
+
63
- font-size: inherit;
127
+ -moz-appearance: none;
64
-
65
- color: inherit;
128
+
66
-
67
- box-sizing: content-box;
129
+ appearance: none;
68
-
130
+
69
- }
131
+ }
132
+
133
+
134
+
70
-
135
+ @media (max-width: 767px) {
71
-
72
-
136
+
73
- .pulldown {
137
+ .select-box-basic {
138
+
74
-
139
+ line-height: 1rem;
140
+
141
+ width: 192px;
142
+
143
+ height: 30px;
144
+
145
+ padding: .2rem .5rem;
146
+
75
- overflow: hidden\9;
147
+ vertical-align: top;
148
+
76
-
149
+ letter-spacing: 1px;
150
+
151
+ color: #454545;
152
+
153
+ border: 1px solid #a5a8a8;
154
+
77
- background: none;
155
+ border-radius: 6px;
78
-
79
-
80
-
156
+
81
- > select {
157
+ background: url(../images/sp/arrow.png) no-repeat;
82
-
158
+
83
- background-color: #fff\9;
159
+ background-color: #fff;
160
+
84
-
161
+ background-position: right center;
162
+
163
+ background-size: 30px 45px;
164
+
85
- width: 130%\9; /* UI分を伸ばす */
165
+ box-shadow: 0 1px rgba(0, 0, 0, 0.12) inset;
166
+
167
+ -webkit-appearance: button;
86
168
 
87
169
  }
88
170
 
89
171
  }
90
172
 
91
- ```
173
+
92
-
93
-
94
-
95
-
96
-
97
- ここまでは反映される
98
-
99
- ```scss
100
-
101
- .select-box-basic {
102
-
103
- -webkit-appearance: none;
104
-
105
- -moz-appearance: none;
106
-
107
- appearance: none;// デフォルトのスタイルを無効にする記述3つ //
108
-
109
- width: 144px;
110
-
111
- height: 33px;
112
-
113
- background: url(../images/arrow.png)no-repeat;
114
-
115
- background-position: 90% 50%;
116
-
117
- padding-left: 8px;
118
-
119
- border: solid 1px #bfbfbf;
120
-
121
- border-radius: 0;
122
-
123
- background-color: #fff;
124
-
125
-
126
-
127
-
128
-
129
- @media ($sp) {
130
-
131
- width: 192px;
132
-
133
- height: 30px;
134
-
135
- padding: 0.2rem 0.5rem;
136
-
137
- border: 1px solid #A5A8A8;
138
-
139
- border-radius: 6px;
140
-
141
- box-shadow: 0 1px rgba(0, 0, 0, 0.12) inset;
142
-
143
- color: #454545;
144
-
145
- letter-spacing: 1px;
146
-
147
- line-height: 1rem;
148
-
149
- vertical-align: top;
150
-
151
- -webkit-appearance: button;
152
-
153
- background: url(../images/sp/arrow.png) no-repeat;
154
-
155
- background-size: 30px 45px;
156
-
157
- background-position: right center;
158
-
159
- background-color: #fff;
160
-
161
- }
162
-
163
- }
164
174
 
165
175
 
166
176