質問編集履歴

2

矢印の削除と不明点の追加

2020/06/03 04:40

投稿

a44k
a44k

スコア2

test CHANGED
File without changes
test CHANGED
@@ -92,20 +92,136 @@
92
92
 
93
93
 
94
94
 
95
- これがわかれば、以下の画像の書き方もできそうだと思っています。
96
-
97
- ![イメージ説明](2e8499f14c9958753bd67e6c460c870c.png)
98
-
99
-
100
-
101
95
 
102
96
 
103
97
  ここまでできました。
104
98
 
105
- ただ、元々ある下矢印の部分が消えないです。
106
-
107
- どうしたら良いでしょうか?
108
-
109
99
 
110
100
 
111
101
  ![![イメージ説明](7f3bfc214d0af5313bfe47f63fe26968.png)](30e13c09aed65a93fc2e42cce7f44bb9.png)
102
+
103
+
104
+
105
+ 矢印に関しても解決しました。
106
+
107
+
108
+
109
+ ## 不明点
110
+
111
+
112
+
113
+
114
+
115
+ 以下の画像のような上下矢印を二つつけるのができないです。
116
+
117
+ ![イメージ説明](97611941a293e084b360db06603a92e0.png)
118
+
119
+
120
+
121
+ 現状、矢印を消しただけでコードがうまく反映されません。
122
+
123
+ 自分のコード何か間違っているところはありますか??
124
+
125
+
126
+
127
+ ![イメージ説明](1b67cde55c97420d4c66ab6db3416008.png)
128
+
129
+
130
+
131
+ このコードでできると思ったんですが、できなかったです。
132
+
133
+
134
+
135
+ ```HTML
136
+
137
+ <div class="choice_select">
138
+
139
+ <select class="choice_select_common choice_select_language">
140
+
141
+ <option>Engilish</option>
142
+
143
+ <option>Japan</option>
144
+
145
+ </select>
146
+
147
+ <select class="choice_select_common choice_select_country">
148
+
149
+ <option>EUR</option>
150
+
151
+ <option>JPN</option>
152
+
153
+ </select>
154
+
155
+ </div>
156
+
157
+ ```
158
+
159
+
160
+
161
+ ```CSS
162
+
163
+ .choice {
164
+
165
+ display: flex;
166
+
167
+ justify-content: center;
168
+
169
+ margin: 141px 122px 0px;
170
+
171
+ font-size: 2.2rem;
172
+
173
+ justify-content: space-between;
174
+
175
+ }
176
+
177
+
178
+
179
+ .choice_select_common {
180
+
181
+ position: relative;
182
+
183
+ }
184
+
185
+
186
+
187
+ .choice_select_common::before,.choice_select_common::after {
188
+
189
+ content: '';
190
+
191
+ width: 0;
192
+
193
+ height: 0;
194
+
195
+ z-index: 1; /* select画面より前に矢印を配置できるように */
196
+
197
+ position: absolute; /* 絶対位置への配置 */
198
+
199
+ box-sizing: content-box;
200
+
201
+ border: 10px solid transparent;
202
+
203
+ right: 10px;
204
+
205
+ }
206
+
207
+
208
+
209
+ .choice_select_common::before {
210
+
211
+ border-bottom: 10px solid #88939e;
212
+
213
+ top: 10px;
214
+
215
+ }
216
+
217
+ .choice_select_common::after {
218
+
219
+ border-top: 10px solid #88939e;
220
+
221
+ top: 40px;
222
+
223
+ }
224
+
225
+
226
+
227
+ ```

1

矢印追加できました

2020/06/03 04:40

投稿

a44k
a44k

スコア2

test CHANGED
File without changes
test CHANGED
@@ -95,3 +95,17 @@
95
95
  これがわかれば、以下の画像の書き方もできそうだと思っています。
96
96
 
97
97
  ![イメージ説明](2e8499f14c9958753bd67e6c460c870c.png)
98
+
99
+
100
+
101
+
102
+
103
+ ここまでできました。
104
+
105
+ ただ、元々ある下矢印の部分が消えないです。
106
+
107
+ どうしたら良いでしょうか?
108
+
109
+
110
+
111
+ ![![イメージ説明](7f3bfc214d0af5313bfe47f63fe26968.png)](30e13c09aed65a93fc2e42cce7f44bb9.png)