Inputs
The .crn-filter-wrapper class includes the style applied to all the input elements.
The following class modifiers can be used to create input variations:
If you need to modify this element globally, use the _buttons.scss file. IF NOT, overwrite styles using the stylesheet of each page.
CSS Class | Description |
---|---|
label .filter-label | basic element and style of the input label |
span .select-dropdown-icon | include this element and style for adding chevron icon |
<div class="crn-filter-wrapper">
<label class="filter-label" for="selectName">
Select Input
</label>
<select id="selectName">
<option>Select Option</option>
</select>
<span class="select-dropdown-icon">
<i class="fa-solid fa-chevron-down"></i>
</span>
</div>
<div class="crn-filter-wrapper">
<label class="filter-label" for="inputText">
Select Input Text
</label>
<input type="text" id="inputText" name="inputText">
</div>
<div class="crn-filter-wrapper has-prefix-icon">
<label class="filter-label" for="inputText">
Date
</label>
<span class="prefix-icon">
<svg class="calendar-icon">
<use
xlink:href="../../resources/new_shopops_theme/img/svg/icons-sprite.svg#calendar-icon">
</svg>
</span>
<input class="form-control" onfocus="this.showPicker()" name="date" type="date" id="letterDate" />
</div>
<div class="crn-filter-wrapper">
<label class="form-checkbox-container ">
<input type="radio" name="test" value="yes"/>
<div class="checkmark"></div>
<span>Radio Option 1</span>
</label>
</div>
<div class="crn-filter-wrapper">
<label class="form-checkbox-container ">
<input type="radio" name="test" value="yes"/>
<div class="checkmark"></div>
<span>Radio Option 2</span>
</label>
</div>
<form>
<div class="crn-filter-wrapper mb-2">
<label class="form-radio-container" for="inputRadio">
<input type="radio" id="inputRadio" name="inputRadio">
<span class="ms-1">Radio Text</span>
</label>
</div>
<div class="crn-filter-wrapper mb-2">
<label class="form-radio-container" for="inputRadio1">
<input type="radio" id="inputRadio1" name="inputRadio">
<span class="ms-1">Radio Text</span>
</label>
</div>
</form>
<form>
<div class="crn-filter-wrapper mb-2">
<label class="form-radio-container" for="inputRadio">
<input type="radio" id="inputRadio" name="inputRadio">
<span class="ms-1">Radio Text</span>
</label>
</div>
<div class="crn-filter-wrapper mb-2">
<label class="form-radio-container" for="inputRadio1">
<input type="radio" id="inputRadio1" name="inputRadio">
<span class="ms-1">Radio Text</span>
</label>
</div>
</form>