<dl>
<dt><label for="sortField">{lang}wcf.search.sortBy{/lang}</label></dt>
<dd>
- <label class="selectDropdown">
- <select id="sortField" name="sortField">
- <option value="relevance"{if $sortField == 'relevance'} selected{/if}>{lang}wcf.search.sortBy.relevance{/lang}</option>
- <option value="subject"{if $sortField == 'subject'} selected{/if}>{lang}wcf.global.subject{/lang}</option>
- <option value="time"{if $sortField == 'time'} selected{/if}>{lang}wcf.search.sortBy.time{/lang}</option>
- <option value="username"{if $sortField == 'username'} selected{/if}>{lang}wcf.search.sortBy.username{/lang}</option>
- </select>
- </label>
+ <select id="sortField" name="sortField">
+ <option value="relevance"{if $sortField == 'relevance'} selected{/if}>{lang}wcf.search.sortBy.relevance{/lang}</option>
+ <option value="subject"{if $sortField == 'subject'} selected{/if}>{lang}wcf.global.subject{/lang}</option>
+ <option value="time"{if $sortField == 'time'} selected{/if}>{lang}wcf.search.sortBy.time{/lang}</option>
+ <option value="username"{if $sortField == 'username'} selected{/if}>{lang}wcf.search.sortBy.username{/lang}</option>
+ </select>
+
+ <select name="sortOrder">
+ <option value="ASC"{if $sortOrder == 'ASC'} selected{/if}>{lang}wcf.global.sortOrder.ascending{/lang}</option>
+ <option value="DESC"{if $sortOrder == 'DESC'} selected{/if}>{lang}wcf.global.sortOrder.descending{/lang}</option>
+ </select>
- <label class="selectDropdown">
- <select name="sortOrder">
- <option value="ASC"{if $sortOrder == 'ASC'} selected{/if}>{lang}wcf.global.sortOrder.ascending{/lang}</option>
- <option value="DESC"{if $sortOrder == 'DESC'} selected{/if}>{lang}wcf.global.sortOrder.descending{/lang}</option>
- </select>
- </label>
{event name='displayOptions'}
</dd>
</dl>
-<label class="selectDropdown">
- <select id="{$option->optionName}" name="values[{$option->optionName}]"{if $option->required} required{/if}>
- {if !$allowEmptyValue|empty}<option value="">{lang}wcf.global.noSelection{/lang}</option>{/if}
- {foreach from=$selectOptions key=key item=selectOption}
- <option value="{$key}"{if $value == $key} selected{/if}>{lang}{@$selectOption}{/lang}</option>
- {/foreach}
- </select>
-</label>
+<select id="{$option->optionName}" name="values[{$option->optionName}]"{if $option->required} required{/if}>
+ {if !$allowEmptyValue|empty}<option value="">{lang}wcf.global.noSelection{/lang}</option>{/if}
+ {foreach from=$selectOptions key=key item=selectOption}
+ <option value="{$key}"{if $value == $key} selected{/if}>{lang}{@$selectOption}{/lang}</option>
+ {/foreach}
+</select>
<label><input type="checkbox" id="search_{$option->optionName}" name="searchOptions[{$option->optionName}]"{if $searchOption} checked{/if}> {lang}wcf.user.option.searchRadioButtonOption{/lang}</label>
-<label class="selectDropdown">
- <select id="{$option->optionName}" name="values[{$option->optionName}]"{if !$searchOption} disabled{/if}{if $option->required} required{/if}>
- {if !$allowEmptyValue|empty}<option value="">{lang}wcf.global.noSelection{/lang}</option>{/if}
- {foreach from=$selectOptions key=key item=selectOption}
- <option value="{$key}"{if $value == $key} selected{/if}>{lang}{@$selectOption}{/lang}</option>
- {/foreach}
- </select>
-</label>
+<select id="{$option->optionName}" name="values[{$option->optionName}]"{if !$searchOption} disabled{/if}{if $option->required} required{/if}>
+ {if !$allowEmptyValue|empty}<option value="">{lang}wcf.global.noSelection{/lang}</option>{/if}
+ {foreach from=$selectOptions key=key item=selectOption}
+ <option value="{$key}"{if $value == $key} selected{/if}>{lang}{@$selectOption}{/lang}</option>
+ {/foreach}
+</select>
<script data-relocate="true">
//<![CDATA[
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
- <label class="selectDropdown">
- <select name="position" id="boxPosition">
- <option value="0">{lang}wcf.acp.box.position{/lang}</option>
- {foreach from=$availablePositions item=availablePosition}
- <option value="{@$availablePosition}"{if $availablePosition == $position} selected{/if}>{@$availablePosition}</option>
- {/foreach}
- </select>
- </label>
+ <select name="position" id="boxPosition">
+ <option value="0">{lang}wcf.acp.box.position{/lang}</option>
+ {foreach from=$availablePositions item=availablePosition}
+ <option value="{@$availablePosition}"{if $availablePosition == $position} selected{/if}>{@$availablePosition}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
- <label class="selectDropdown">
- <select name="boxType" id="boxType">
- <option value="">{lang}wcf.acp.box.type{/lang}</option>
- <option value="text"{if $boxType == 'text'} selected{/if}>{lang}wcf.acp.box.type.text{/lang}</option>
- <option value="html"{if $boxType == 'html'} selected{/if}>{lang}wcf.acp.box.type.html{/lang}</option>
- <option value="tpl"{if $boxType == 'tpl'} selected{/if}>{lang}wcf.acp.box.type.tpl{/lang}</option>
- <option value="system"{if $boxType == 'system'} selected{/if}>{lang}wcf.acp.box.type.system{/lang}</option>
- </select>
- </label>
+ <select name="boxType" id="boxType">
+ <option value="">{lang}wcf.acp.box.type{/lang}</option>
+ <option value="text"{if $boxType == 'text'} selected{/if}>{lang}wcf.acp.box.type.text{/lang}</option>
+ <option value="html"{if $boxType == 'html'} selected{/if}>{lang}wcf.acp.box.type.html{/lang}</option>
+ <option value="tpl"{if $boxType == 'tpl'} selected{/if}>{lang}wcf.acp.box.type.tpl{/lang}</option>
+ <option value="system"{if $boxType == 'system'} selected{/if}>{lang}wcf.acp.box.type.system{/lang}</option>
+ </select>
</dd>
</dl>
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
- <label class="selectDropdown">
- <select id="groupID" name="groupID">
- <option value="0">{lang}wcf.acp.label.group{/lang}</option>
- {foreach from=$labelGroupList item=group}
- <option value="{@$group->groupID}"{if $group->groupID == $groupID} selected{/if}>{$group}{if $group->groupDescription} / {$group->groupDescription}{/if}</option>
- {/foreach}
- </select>
- </label>
+ <select id="groupID" name="groupID">
+ <option value="0">{lang}wcf.acp.label.group{/lang}</option>
+ {foreach from=$labelGroupList item=group}
+ <option value="{@$group->groupID}"{if $group->groupID == $groupID} selected{/if}>{$group}{if $group->groupDescription} / {$group->groupDescription}{/if}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
- <label class="selectDropdown">
- <select name="applicationPackageID" id="applicationPackageID">
- <option value="0">{lang}wcf.acp.page.application{/lang}</option>
- {foreach from=$availableApplications item=availableApplication}
- <option value="{@$availableApplication->packageID}"{if $availableApplication->packageID == $applicationPackageID} selected{/if}>{$availableApplication->domainName}{$availableApplication->domainPath}</option>
- {/foreach}
- </select>
- </label>
+ <select name="applicationPackageID" id="applicationPackageID">
+ <option value="0">{lang}wcf.acp.page.application{/lang}</option>
+ {foreach from=$availableApplications item=availableApplication}
+ <option value="{@$availableApplication->packageID}"{if $availableApplication->packageID == $applicationPackageID} selected{/if}>{$availableApplication->domainName}{$availableApplication->domainPath}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
- <label class="selectDropdown">
- <select name="pageType" id="pageType">
- <option value="">{lang}wcf.acp.page.type{/lang}</option>
- <option value="text"{if $pageType == 'text'} selected{/if}>{lang}wcf.acp.page.type.text{/lang}</option>
- <option value="html"{if $pageType == 'html'} selected{/if}>{lang}wcf.acp.page.type.html{/lang}</option>
- <option value="tpl"{if $pageType == 'tpl'} selected{/if}>{lang}wcf.acp.page.type.tpl{/lang}</option>
- <option value="system"{if $pageType == 'system'} selected{/if}>{lang}wcf.acp.page.type.system{/lang}</option>
- </select>
- </label>
+ <select name="pageType" id="pageType">
+ <option value="">{lang}wcf.acp.page.type{/lang}</option>
+ <option value="text"{if $pageType == 'text'} selected{/if}>{lang}wcf.acp.page.type.text{/lang}</option>
+ <option value="html"{if $pageType == 'html'} selected{/if}>{lang}wcf.acp.page.type.html{/lang}</option>
+ <option value="tpl"{if $pageType == 'tpl'} selected{/if}>{lang}wcf.acp.page.type.tpl{/lang}</option>
+ <option value="system"{if $pageType == 'system'} selected{/if}>{lang}wcf.acp.page.type.system{/lang}</option>
+ </select>
</dd>
</dl>
<dt><label for="wcfLayoutMinWidth">{lang}wcf.acp.style.globals.fluidLayoutMinWidth{/lang}</label></dt>
<dd>
<input type="number" id="wcfLayoutMinWidth" name="wcfLayoutMinWidth" value="{@$variables[wcfLayoutMinWidth]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfLayoutMinWidth_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfLayoutMinWidth_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfLayoutMinWidth_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfLayoutMinWidth_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl id="fluidLayoutMaxWidth">
<dt><label for="wcfLayoutMaxWidth">{lang}wcf.acp.style.globals.fluidLayoutMaxWidth{/lang}</label></dt>
<dd>
<input type="number" id="wcfLayoutMaxWidth" name="wcfLayoutMaxWidth" value="{@$variables[wcfLayoutMaxWidth]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfLayoutMaxWidth_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfLayoutMaxWidth_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfLayoutMaxWidth_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfLayoutMaxWidth_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dt><label for="wcfLayoutFixedWidth">{lang}wcf.acp.style.globals.fixedLayoutWidth{/lang}</label></dt>
<dd>
<input type="number" id="wcfLayoutFixedWidth" name="wcfLayoutFixedWidth" value="{@$variables[wcfLayoutFixedWidth]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfLayoutFixedWidth_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfLayoutFixedWidth_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfLayoutFixedWidth_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfLayoutFixedWidth_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dt><label for="wcfFontSizeDefault">{lang}wcf.acp.style.globals.fontSizeDefault{/lang}</label></dt>
<dd>
<input type="number" id="wcfFontSizeDefault" name="wcfFontSizeDefault" value="{@$variables[wcfFontSizeDefault]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfFontSizeDefault_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfFontSizeDefault_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontSizeDefault_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfFontSizeDefault_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl>
<dt><label for="wcfFontSizeSmall">{lang}wcf.acp.style.globals.fontSizeSmall{/lang}</label></dt>
<dd>
<input type="number" id="wcfFontSizeSmall" name="wcfFontSizeSmall" value="{@$variables[wcfFontSizeSmall]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfFontSizeSmall_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfFontSizeSmall_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontSizeSmall_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfFontSizeSmall_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl>
<dt><label for="wcfFontSizeHeadline">{lang}wcf.acp.style.globals.fontSizeHeadline{/lang}</label></dt>
<dd>
<input type="number" id="wcfFontSizeHeadline" name="wcfFontSizeHeadline" value="{@$variables[wcfFontSizeHeadline]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfFontSizeHeadline_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfFontSizeHeadline_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontSizeHeadline_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfFontSizeHeadline_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl>
<dt><label for="wcfFontSizeSection">{lang}wcf.acp.style.globals.fontSizeSection{/lang}</label></dt>
<dd>
<input type="number" id="wcfFontSizeSection" name="wcfFontSizeSection" value="{@$variables[wcfFontSizeSection]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfFontSizeSection_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfFontSizeSection_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontSizeSection_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfFontSizeSection_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl>
<dt><label for="wcfFontSizeTitle">{lang}wcf.acp.style.globals.fontSizeTitle{/lang}</label></dt>
<dd>
<input type="number" id="wcfFontSizeTitle" name="wcfFontSizeTitle" value="{@$variables[wcfFontSizeTitle]}" class="tiny">
- <label class="selectDropdown">
- <select name="wcfFontSizeTitle_unit" class="jsUnitSelect">
- {foreach from=$availableUnits item=unit}
- <option value="{@$unit}"{if $variables[wcfFontSizeTitle_unit] == $unit} selected{/if}>{@$unit}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontSizeTitle_unit" class="jsUnitSelect">
+ {foreach from=$availableUnits item=unit}
+ <option value="{@$unit}"{if $variables[wcfFontSizeTitle_unit] == $unit} selected{/if}>{@$unit}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<dl>
<dt><label for="wcfFontFamilyFallback">{lang}wcf.acp.style.globals.fontFamilyFallback{/lang}</label></dt>
<dd>
- <label class="selectDropdown">
- <select name="wcfFontFamilyFallback" id="wcfFontFamilyFallback">
- {foreach from=$availableFontFamilies key=fontFamily item=primaryFont}
- <option value='{@$fontFamily}'{if $variables[wcfFontFamilyFallback] == $fontFamily} selected{/if}>{@$primaryFont}</option>
- {/foreach}
- </select>
- </label>
+ <select name="wcfFontFamilyFallback" id="wcfFontFamilyFallback">
+ {foreach from=$availableFontFamilies key=fontFamily item=primaryFont}
+ <option value='{@$fontFamily}'{if $variables[wcfFontFamilyFallback] == $fontFamily} selected{/if}>{@$primaryFont}</option>
+ {/foreach}
+ </select>
</dd>
</dl>
<div id="spSidebar">
<div id="spVariablesWrapper">
<div class="spSidebarBox">
- <label class="selectDropdown">
- <select id="spCategories">
- <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
- {foreach from=$colorCategories key=spName item=spCategory}
- <optgroup label="{$spName}">
- {if $spCategory|is_array}
- {foreach from=$spCategory item=spChildCategory}
- <option value="{$spChildCategory}">{$spChildCategory}</option>
- {/foreach}
- {else}
- <option value="{$spCategory}">{$spCategory}</option>
- {/if}
- </optgroup>
- {/foreach}
- </select>
- </label>
+ <select id="spCategories">
+ <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
+ {foreach from=$colorCategories key=spName item=spCategory}
+ <optgroup label="{$spName}">
+ {if $spCategory|is_array}
+ {foreach from=$spCategory item=spChildCategory}
+ <option value="{$spChildCategory}">{$spChildCategory}</option>
+ {/foreach}
+ {else}
+ <option value="{$spCategory}">{$spCategory}</option>
+ {/if}
+ </optgroup>
+ {/foreach}
+ </select>
</div>
<div class="spSidebarBox" data-category="none">
_dateMonth = elCreate('select');
_dateMonth.className = 'month';
_dateMonth.addEventListener('change', this._changeMonth.bind(this));
-
- var selectWrapper = elCreate('label');
- selectWrapper.className = 'selectDropdown';
- selectWrapper.appendChild(_dateMonth);
- monthYearContainer.appendChild(selectWrapper);
+ monthYearContainer.appendChild(_dateMonth);
var i, months = '', monthNames = Language.get('__monthsShort');
for (i = 0; i < 12; i++) {
_dateYear = elCreate('select');
_dateYear.className = 'year';
_dateYear.addEventListener('change', this._changeYear.bind(this));
-
- selectWrapper = elCreate('label');
- selectWrapper.className = 'selectDropdown';
- selectWrapper.appendChild(_dateYear);
- monthYearContainer.appendChild(selectWrapper);
+ monthYearContainer.appendChild(_dateYear);
_dateMonthNext = elCreate('a');
_dateMonthNext.className = 'next';
max-width: 100%;
}
-.selectDropdown {
- max-width: 100%;
- position: relative;
-
- // force inline-block to mimic the <select> display and make both its dimensions
- // and flow behavior more predictable; !important is required to prevent styles
- // applied to generic <label> in certain cases such as within <dd>
- display: inline-block !important;
-
- &::after {
- content: $fa-var-caret-down;
- display: block;
- font-family: FontAwesome;
- font-size: 14px;
- pointer-events: none;
- position: absolute;
- right: 7px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- > select {
- padding-right: 18px;
-
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
-}
-
-
-
.formSubmit {
text-align: center;
display: none;
}
- .selectDropdown,
select {
width: 100%;
}
}
}
- .selectDropdown + .selectDropdown {
+ select.year {
margin-left: 5px;
}