How to add custom CSS class to inputs within the “form based” webpart

Technical support leader

Juraj Ondrus asked on June 3, 2010 06:31

How to add custom CSS class to inputs within the “form based” webpart

Correct Answer

Juraj Ondrus answered on June 3, 2010 06:31

We’ll see an example of Submit button element of the Logon form webpart. You can add your custom CSS class to the Logon input button following way:

1) Please open Logon form webpart properties. At the top of opened window there two tabs, right one is Layout. Please switch to this one.

2) You will need to create new layout, in order to be able to edit it.

3) Once you use your custom layout you can add CssClass property to the button control, so that it can finally look like this:

<cms:LocalizedButton CssClass="LogonButton" ID="LoginButton" runat="server" CommandName="Login" ValidationGroup="Login1" EnableViewState="false" />

This will enforce adding CSS class to the input element which represents your button. Basically, you can change/add the CSS classes of other inputs (textboxes) the same way. Please note, this procedure is applicable also for other similar form webparts like Change password, Sign out button, etc.

-ov-
2 votesVote for this answer Unmark Correct answer

   Please, sign in to be able to submit a new answer.