[SOLVED] Change field color using class

Cb 2.0 allow now to input our own class inside any field. However I don't see how to do for change edit field appearance with that.

For example I have this field:



The "myclass" is the class value I filled inside CB field. But this class is apply to the full row and not to the field itself. I tried for hours without find how to target field. Of course I can target by input ID or globally all input but is not what I want.

Here a Fiddle:

jsfiddle.net/L2nht9kn/3/

In my experience you can add your styles to your class (myclass in this case) and define the fields within this class, like "myclass label" or "myclass > label" etc.
I don't speak CSS, but using the firebug plugin for firefox it was possible to see changes immediately and figure it out. We ended up putting the user defined styles at the end of the template's css file (protostar in this case), so they're easy to find.

yes I use Firebug too but I'm not a css guru and I don't see how to target my input. I tried a bunch of code such


OR

The class always applies to the row. This gives significantly better control over the styling as you can style the entire field row however you like. Adding to your selector to target the input is relatively easy using some additional selectors. Example as follows.


The above usage covers all basic input types. Please do not use important tags. It overrides inline style. Use it only if it's a last resort. Increase your selector weight as needed instead of using important tags if possible.

To explain why your two above examples do not work the first one you're targeting the immediate text input child. Problem is it's not a direct child of .myclass so that won't work. Your second selector doesn't work because first you're missing a period so it's not being considered a class and second the input isn't on the myclass element (selector doesn't make sense in this context).

Also note every field CB outputs is always given a unique ID. You can style elements using the ID. It's not exactly recommended as the selector weight is very high, but it's doable. Using your example you could do the following.

Sorry in fact I totally missed out this on my console:




I simply added background color and that work but only on input fields. All others fields remain unaffected. However if I use !important all fields become well coloured. This solution is the best for me because I can control globally all CB fields without the use of additional custom class.


Yes targeting by ID is what I made often with 1.9.1 but is annoying especially when is matter to style many same elements such fields.

I simply added background color and that work but only on input fields. All others fields remain unaffected. However if I use !important all fields become well coloured. This solution is the best for me because I can control globally all CB fields without the use of additional custom class.

You don't need to use !important. Your selector just needs more weight. Example as follows.


The Bootstrap selector that's adding the background is .cb_template .form-control. So the above should have no issues overriding it. If it does have issues you can go as far as the following and should not no problems.


Which the above could even be shortened to.