how to add asterik with place holder to the textbox when floatinglabel is given as 'never'

Question

Hi Team​whenever the floatLabelType="Auto" is given the red asterisk is coming. but when the floatLabelType="Never" is given i could not display the asterisk . please helpTHanks​​

Kokila Poovendran · Answer

Hi jismol,Greeting from Syncfusion support!It appears that the issue you are encountering stems from using floatLabelType="Never", which results in the label remaining static. Consequently, the asterisk (*) that you've styled to appear after the floating label will not be visible in this scenario.To address this and display the asterisk (*) even when the label doesn't float, you can modify your approach. Please consider the following code snippet:Code snippet:

#textbox::placeholder { /* Change the color to your desired color */ color: red; /* Example: Red */ } In this code snippet, we've included the asterisk symbol directly within the placeholder text. This allows you to style the placeholder text to achieve the desired effect, even when the label remains static. Regards,Kokila Poovendran.

jismol · Answer

HI Kokila,Thank you for your quick response. My requirement is , i want only the asterisk of place holder in red color. the remaining part 'First Name' should be in black color itself. Seeking for you help.Thanks and Regards

Kokila Poovendran · Answer

Hi Jismol,We sincerely apologize for any inconvenience caused by this issue. We'd like to provide some clarity on the behavior you're observing.When you set the "floatLabelType" to "Never," the label is directly applied to the placeholder attribute as a string. This means we don't have the capability to selectively highlight the asterisk symbol separately. In this scenario, the entire placeholder text will appear in the color specified.If you prefer not to have the label float and wish to keep it static above the textbox at all times, you can achieve this by setting the "floatLabelType" to "Always." Documentation: https://ej2.syncfusion.com/vue/documentation/api/textbox/#floatlabeltype If you have any further questions or if there's anything else we can assist you with, please feel free to let us know.Best regards,Kokila Poovendran.

jismol · Answer

Hi Kokila.I understood the scenario. But my requirement is i don't want the floating label at all since there i have to show one checkbox for another feature. But wanted to highlight the place holder with red asterisk to indicate which is mandatory filed. Is there any option to achieve this criteria.Thanks in AdvanceRegardsJismol

Kokila Poovendran · Answer

Hi jismolWe apologize for any inconvenience caused by the issue you're facing. We understand your requirement is to not display the floating label and instead highlight the placeholder text with a red asterisk to indicate mandatory fields.To achieve this, you can use the following CSS code snippet:

.e-input-group {
            position: relative;
          }
          .e-input-group::after {
            content: '*' !important;
            position: absolute !important;
            top: 8px !important;
            left: 80px !important;
            color: #f00 !important;
          }

This code will add a red asterisk after the input element, effectively highlighting the placeholder text as a mandatory field.For more information and additional examples, you can refer to the following resources:Stack Overflow - How to Get an Asterisk in Placeholder with CSSStack Overflow - Adding a Red Asterisk to Required FieldsAttachment: dropdown_f56d8773.zip