Browse code

Add wrapper to select fields for more styling options like pseudo elements

Benjamin Roth authored on07/02/2020 12:12:11
Showing3 changed files
... ...
@@ -146,6 +146,10 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
146 146
 	min-height: 2.1em;
147 147
 }
148 148
 
149
+.widget .select-wrapper {
150
+	position: relative;
151
+}
152
+
149 153
 .widget.w10 { float: left; width: 10%; }
150 154
 .widget.w11 { float: left; width: 11.111%; }
151 155
 .widget.w15 { float: left; width: 15%; }
... ...
@@ -1 +1 @@
1
-input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea,select{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.widget input.captcha{max-width:4em}.formbody>fieldset{clear:left}.formbody>fieldset legend{color:inherit;font-size:123%;line-height:2;font-weight:normal;border-bottom:inherit 3px solid;margin-bottom:1em}.widget .radio_container legend,.widget .checkbox_container legend{color:inherit;font-size:100%;font-weight:normal;border-bottom:0;display:block;margin-bottom:.4em;line-height:1.5em}.widget .checkbox_container label,.widget .radio_container label{font-weight:normal;display:inline;margin-bottom:0}.widget .checkbox_container>span,.widget .radio_container>span{display:block}.widget.headline{margin-top:1em;font-size:108%;font-weight:bold;min-height:1.5em}.widget{padding:0 10px;margin-bottom:.5em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;min-height:4em;float:left;width:100%}.widget.cbx{min-height:1.5em;height:1.5em;padding:4px 10px}.widget label{display:block;margin-bottom:.4em;line-height:1.5em}.widget.error input,.widget.error select,.widget.error textarea{border-color:#e23e15}.widget p.error{font-size:85%;margin-top:-0.4em;margin-bottom:.4em}.widget.error .errortip{background-color:#e23e15;border-bottom-left-radius:50%;border-bottom-right-radius:50%;border-top-left-radius:50%;border-top-right-radius:50%;color:#fff;cursor:help;display:block;float:right;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:normal;height:15px;line-height:13px;margin-top:3.25px;text-align:center;vertical-align:top;width:15px}.submit_container{min-height:2.1em}.widget.w10{float:left;width:10%}.widget.w11{float:left;width:11.111%}.widget.w15{float:left;width:15%}.widget.w16_5{float:left;width:16.6665%}.widget.w20{float:left;width:20%}.widget.w22{float:left;width:22.222%}.widget.w25{float:left;width:25%}.widget.w30{float:left;width:30%}.widget.w33{float:left;width:33.333%}.widget.w35{float:left;width:35%}.widget.w40{float:left;width:40%}.widget.w44{float:left;width:44.444%}.widget.w45{float:left;width:45%}.widget.w50{float:left;width:50%}.widget.w55{float:left;width:55%}.widget.w60{float:left;width:60%}.widget.w65{float:left;width:65%}.widget.w66{float:left;width:66.666%}.widget.w70{float:left;width:70%}.widget.w75{float:left;width:75%}.widget.w80{float:left;width:80%}.widget.w85{float:left;width:85%}.widget.w90{float:left;width:90%}.widget.w95{float:left;width:95%}.widget.w100{float:left;width:100%}.widget.clr,.formbody>fieldset{clear:left}@media screen and (max-width:43em){.widget.w10,.widget.w11,.widget.w15,.widget.w16_5,.widget.w20,.widget.w22,.widget.w25,.widget.w30,.widget.w33,.widget.w35,.widget.w40,.widget.w44,.widget.w45,.widget.w50,.widget.w55,.widget.w60,.widget.w65,.widget.w66,.widget.w70,.widget.w75,.widget.w80,.widget.w85,.widget.w90,.widget.w95,.widget.w100{float:none;width:100%}}.widget.w10:before,.widget.w10:after,.widget.w11:before,.widget.w11:after,.widget.w15:before,.widget.w15:after,.widget.w16_5:before,.widget.w16_5:after,.widget.w20:before,.widget.w20:after,.widget.w22:before,.widget.w22:after,.widget.w25:before,.widget.w25:after,.widget.w30:before,.widget.w30:after,.widget.w33:before,.widget.w33:after,.widget.w35:before,.widget.w35:after,.widget.w40:before,.widget.w40:after,.widget.w44:before,.widget.w44:after,.widget.w45:before,.widget.w45:after,.widget.w50:before,.widget.w50:after,.widget.w55:before,.widget.w55:after,.widget.w60:before,.widget.w60:after,.widget.w65:before,.widget.w65:after,.widget.w66:before,.widget.w66:after,.widget.w70:before,.widget.w70:after,.widget.w75:before,.widget.w75:after,.widget.w80:before,.widget.w80:after,.widget.w85:before,.widget.w85:after,.widget.w90:before,.widget.w90:after,.widget.w95:before,.widget.w95:after,.widget.w100:before,.widget.w100:after,form:before,form:after{content:" ";display:table}.widget.w10:after,.widget.w11:after,.widget.w15:after,.widget.w16_5:after,.widget.w20:after,.widget.w22:after,.widget.w25:after,.widget.w30:after,.widget.w33:after,.widget.w35:after,.widget.w40:after,.widget.w44:after,.widget.w45:after,.widget.w50:after,.widget.w55:after,.widget.w66:after,.widget.w65:after,.widget.w70:after,.widget.w75:after,.widget.w80:after,.widget.w85:after,.widget.w90:after,.widget.w95:after,.widget.w100:after,form:after{clear:both}.widget.widget-split input[type="text"],.widget.widget-split input[type="password"],.widget.widget-split input[type="date"],.widget.widget-split input[type="datetime"],.widget.widget-split input[type="email"],.widget.widget-split input[type="number"],.widget.widget-split input[type="search"],.widget.widget-split input[type="tel"],.widget.widget-split input[type="time"],.widget.widget-split input[type="url"],.widget.widget-split textarea,.widget.widget-split select{max-width:50% !important;min-width:10% !important;float:left;margin-right:10px;display:inline}.widget.widget-split.widget-split-3 input{max-width:30% !important}.widget.widget-split.widget-split-3 input[type="submit"]{max-width:70% !important}.widget.widget-split.widget-split-4 input{max-width:40% !important}.widget.widget-split.widget-split-4 input[type="submit"]{max-width:60% !important}.widget.widget-split.widget-split-5 input{max-width:50% !important}.widget.widget-split.widget-split-5 input[type="submit"]{max-width:50% !important}.widget.widget-split.widget-split-6 input{max-width:60% !important}.widget.widget-split.widget-split-6 input[type="submit"]{max-width:40% !important}.widget.widget-split.widget-split-7 input{max-width:70% !important}.widget.widget-split.widget-split-7 input[type="submit"]{max-width:30% !important}.widget.fl_right input[type="submit"],.submit_container.fl_right .submit{float:right}.widget.lblp{padding-top:1.9em;min-height:2.1em}.widget.autoh{min-height:0}.widget,form{*zoom:1}
2 1
\ No newline at end of file
2
+.widget,input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.widget input.captcha{max-width:4em}.formbody>fieldset legend{color:inherit;font-size:123%;line-height:2;font-weight:400;border-bottom:inherit 3px solid;margin-bottom:1em}.widget .checkbox_container legend,.widget .radio_container legend{color:inherit;font-size:100%;font-weight:400;border-bottom:none;display:block;margin-bottom:.4em;line-height:1.5em}.widget .checkbox_container label,.widget .radio_container label{font-weight:400;display:inline;margin-bottom:0}.widget .checkbox_container>span,.widget .radio_container>span{display:block}.widget.headline{margin-top:1em;font-size:108%;font-weight:700;min-height:1.5em}.widget{padding:0 10px;margin-bottom:.5em;min-height:4em;float:left}.widget.cbx{min-height:1.5em;height:1.5em;padding:4px 10px}.widget label{display:block;margin-bottom:.4em;line-height:1.5em}.widget.error input,.widget.error select,.widget.error textarea{border-color:#e23e15}.widget p.error{font-size:85%;margin-top:-.4em;margin-bottom:.4em}.widget.error .errortip{background-color:#e23e15;border-bottom-left-radius:50%;border-bottom-right-radius:50%;border-top-left-radius:50%;border-top-right-radius:50%;color:#fff;cursor:help;display:block;float:right;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;height:15px;line-height:13px;margin-top:3.25px;text-align:center;vertical-align:top;width:15px}.submit_container{min-height:2.1em}.widget .select-wrapper{position:relative}.widget.w10{float:left;width:10%}.widget.w11{float:left;width:11.111%}.widget.w15{float:left;width:15%}.widget.w16_5{float:left;width:16.6665%}.widget.w20{float:left;width:20%}.widget.w22{float:left;width:22.222%}.widget.w25{float:left;width:25%}.widget.w30{float:left;width:30%}.widget.w33{float:left;width:33.333%}.widget.w35{float:left;width:35%}.widget.w40{float:left;width:40%}.widget.w44{float:left;width:44.444%}.widget.w45{float:left;width:45%}.widget.w50{float:left;width:50%}.widget.w55{float:left;width:55%}.widget.w60{float:left;width:60%}.widget.w65{float:left;width:65%}.widget.w66{float:left;width:66.666%}.widget.w70{float:left;width:70%}.widget.w75{float:left;width:75%}.widget.w80{float:left;width:80%}.widget.w85{float:left;width:85%}.widget.w90{float:left;width:90%}.widget.w95{float:left;width:95%}.widget.w100{float:left;width:100%}.formbody>fieldset,.widget.clr{clear:left}@media screen and (max-width:43em){.widget.w10,.widget.w100,.widget.w11,.widget.w15,.widget.w16_5,.widget.w20,.widget.w22,.widget.w25,.widget.w30,.widget.w33,.widget.w35,.widget.w40,.widget.w44,.widget.w45,.widget.w50,.widget.w55,.widget.w60,.widget.w65,.widget.w66,.widget.w70,.widget.w75,.widget.w80,.widget.w85,.widget.w90,.widget.w95{float:none;width:100%}}.widget.w100:after,.widget.w100:before,.widget.w10:after,.widget.w10:before,.widget.w11:after,.widget.w11:before,.widget.w15:after,.widget.w15:before,.widget.w16_5:after,.widget.w16_5:before,.widget.w20:after,.widget.w20:before,.widget.w22:after,.widget.w22:before,.widget.w25:after,.widget.w25:before,.widget.w30:after,.widget.w30:before,.widget.w33:after,.widget.w33:before,.widget.w35:after,.widget.w35:before,.widget.w40:after,.widget.w40:before,.widget.w44:after,.widget.w44:before,.widget.w45:after,.widget.w45:before,.widget.w50:after,.widget.w50:before,.widget.w55:after,.widget.w55:before,.widget.w60:after,.widget.w60:before,.widget.w65:after,.widget.w65:before,.widget.w66:after,.widget.w66:before,.widget.w70:after,.widget.w70:before,.widget.w75:after,.widget.w75:before,.widget.w80:after,.widget.w80:before,.widget.w85:after,.widget.w85:before,.widget.w90:after,.widget.w90:before,.widget.w95:after,.widget.w95:before,form:after,form:before{content:" ";display:table}.widget.w100:after,.widget.w10:after,.widget.w11:after,.widget.w15:after,.widget.w16_5:after,.widget.w20:after,.widget.w22:after,.widget.w25:after,.widget.w30:after,.widget.w33:after,.widget.w35:after,.widget.w40:after,.widget.w44:after,.widget.w45:after,.widget.w50:after,.widget.w55:after,.widget.w65:after,.widget.w66:after,.widget.w70:after,.widget.w75:after,.widget.w80:after,.widget.w85:after,.widget.w90:after,.widget.w95:after,form:after{clear:both}.widget.widget-split input[type=date],.widget.widget-split input[type=datetime],.widget.widget-split input[type=email],.widget.widget-split input[type=number],.widget.widget-split input[type=password],.widget.widget-split input[type=search],.widget.widget-split input[type=tel],.widget.widget-split input[type=text],.widget.widget-split input[type=time],.widget.widget-split input[type=url],.widget.widget-split select,.widget.widget-split textarea{max-width:50%!important;min-width:10%!important;float:left;margin-right:10px;display:inline}.widget.widget-split.widget-split-3 input{max-width:30%!important}.widget.widget-split.widget-split-3 input[type=submit]{max-width:70%!important}.widget.widget-split.widget-split-4 input{max-width:40%!important}.widget.widget-split.widget-split-4 input[type=submit]{max-width:60%!important}.widget.widget-split.widget-split-5 input,.widget.widget-split.widget-split-5 input[type=submit]{max-width:50%!important}.widget.widget-split.widget-split-6 input{max-width:60%!important}.widget.widget-split.widget-split-6 input[type=submit]{max-width:40%!important}.widget.widget-split.widget-split-7 input{max-width:70%!important}.widget.widget-split.widget-split-7 input[type=submit]{max-width:30%!important}.submit_container.fl_right .submit,.widget.fl_right input[type=submit]{float:right}.widget.lblp{padding-top:1.9em;min-height:2.1em}.widget.autoh{min-height:0}.widget,form{*zoom:1}
3 3
\ No newline at end of file
... ...
@@ -18,21 +18,23 @@
18 18
     <input type="hidden" name="<?= rtrim($this->name, '[]') ?>" value="">
19 19
   <?php endif; ?>
20 20
 
21
-  <select name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="<?= $this->class ?>"<?= $this->getAttributes() ?>>
22
-    <?php foreach ($this->getOptions() as $option): ?>
23
-      <?php if ('group_start' == $option['type']): ?>
24
-        <optgroup label="<?= $option['label'] ?>">
25
-      <?php endif; ?>
26
-
27
-      <?php if ('option' == $option['type']): ?>
28
-        <option value="<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>
29
-      <?php endif; ?>
30
-
31
-      <?php if ('group_end' == $option['type']): ?>
32
-        </optgroup>
33
-      <?php endif; ?>
34
-    <?php endforeach; ?>
35
-  </select>
21
+  <div class="select-wrapper">
22
+    <select name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="<?= $this->class ?>"<?= $this->getAttributes() ?>>
23
+      <?php foreach ($this->getOptions() as $option): ?>
24
+        <?php if ('group_start' == $option['type']): ?>
25
+          <optgroup label="<?= $option['label'] ?>">
26
+        <?php endif; ?>
27
+
28
+        <?php if ('option' == $option['type']): ?>
29
+          <option value="<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>
30
+        <?php endif; ?>
31
+
32
+        <?php if ('group_end' == $option['type']): ?>
33
+          </optgroup>
34
+        <?php endif; ?>
35
+      <?php endforeach; ?>
36
+    </select>
37
+  </div>
36 38
 
37 39
   <?php if ($this->hasErrors()): ?>
38 40
     <p class="error"><?= $this->getErrorAsString() ?></p>