Utilizing two different types of input fields while utilizing the same CSS classes to achieve the desired styling (e.g., .Input.Input__field, .Input__suffix);
- One with a Prefix and Suffix containing an Icon (The input box should take up 75%, while the Icon occupies 25%).
- Input Modifiers. (By default: The input box should occupy 100%)
It is advisable to include a class (e.g., .default) to distinguish between input boxes with Icons and those without as mentioned above.
I have made modifications to the code on CodePen: https://codepen.io/mediraviteja/pen/OJyrozR
The changes I implemented are as follows:
a) Added the class ".default" to the container div (e.g., ) for all full-width inputs such as Default input, Modificator inputs)
b) Made CSS adjustments within the following classes
.Input__field{
width: 100%; -- Remove CSS property
max-width: 76%; -- Add CSS property
}
.Input__suffix{
max-width: 26%; -- Add CSS property
}
**Added new class**
.default .Input__field{
max-width: 100%;
}
.default .Input__suffix{
max-width: 100%;
}
Changed the HTML element
<div class="Input "> to <div class="Input default">
Whenever you require a full-width Input box like (Default input, Input -Warning, Input - Invalid boxes, etc.)