How to change the input field borders and label style on a form widget

How to change the input field borders and label style on a form widget

I like the way input label and field looks when it is not part of the form widget:

I don't like how it all looks when it is placed inside the form widget:

The label font is light and the field has no borders.

I would like to change that. I do have a form with already lots of fields and AJAX refresh using the form. It would be a lot easier for me to just change the css of the form to make the label and field border look the way I want.

Any help with that would be greatly appreciated!

Hi Macro,

Use the developer tools of your browser to find out what class the label has. Override the CSS for that class.
Hello Kilian Sir,

I tried overriding the CSS, but it's not owrking.

Form should look like this :

but I am not able to add border to input box.

Please suggest.

Thanks and Regards,
Suraj Borade
Hi Suraj,

What browser are you using? I recall that input box styling is browser dependent.
Hi Sir,

I tried using that on Google Chrome.
Hi Sir,

It's working now.

Earlier I had written CSS as 

.StyleInput {
    border: 1px solid black;
    padding-bottom: 5px;
    margin-bottom: 5px;    

Now I changed CSS as 

.StyleInput { border: 1px solid black !important; padding-bottom: 5px; margin-bottom: 5px; }

Ok, great you got it working. The fact that you need an !important makes me think there's some problem with the order in which the CSS is evaluated, but as long as you're happy I'm too :)
Oh Thanks.

I didn't think that deep about CSS  evaluation order. I just used Develper tool of browser and found why css is not working.
Note: I had read about using Developer tool from another post of yours and just applied that logic here :)

For now it's working. I will think about CSS evaluation order later.

The devtools are quite handy when it comes to trying to find out which class is applied to an element. Typically those classes are defined in a base Theme's, or a derived Theme's CSS. You can override them again in the CSS of a specific screen (though that should be avoided in general, as tweaking a specific screen is likely not what you want). In general I'd advise to derive a Theme from an existing Theme, and start from there.
Thanks for advice. For now I can not derive Theme from existing Theme since we have built our own Theme and need to use that Theme for all applications.
Now making changes in Theme is not possible since Theme is controlled by other developer and we need approval from Business user.
I just defined new CSS class for specific two screens and used. Not screens - Screens turned Popups :)

Hi Macro101,

I think Form widget is more comfortable with SilkUI.

If these controls are used properly inside theme to which it refers, they will look perfect inside Form widget. You just need to change your base Theme to point to correct location.

After doing this, you won't have to write extra CSS.

If you are using SilkUI in your eSpace, check the base theme else I advice you to go for EditRecord widget rather than Form Widget. 

(I have observed some problems with Form widget and I will publish them soon.)

Thanks and Regards,
Suraj Borade