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>