Remove border from input fields

[BrianI]

Hi, in the caspio styles under form / details fields I have set Border Options both color and type to none. Yet I am still getting a black border around my input fields. The background colour here works so I know it is referring to the correct elements.

I can override this in my own css using...

  .cbFormTextField, .cbFormSelect, .cbFormTextArea{

    border: none;

  }

But I shouldn't have to do this.

Have I missed something? Has anyone else got this to work?

Thanks

 

 

[CoopperBackpack]

Hello @BrianI,

Yes, you refer to the correct elements.
By default the styles for those elements are added like this:

As you can see, the class name is not just .cbFormTextField but there is an additional class before it is added automatically. 

So, for example, when you refer to the element as .cbFormTextField, the CSS rule with 2 classes overrides the CSS rule with 1 class 


 

There are 2 options to fix this:

1) to use more specific selectors;
2) to use the !important property.

In this example, the !important property is the simpler option.

Please test:

<style>
  .cbFormTextField, .cbFormSelect, .cbFormTextArea{
       border: none !important;
  }
</style>

[BrianI]

Hi @CoopperBackpack

Thanks for the reply. I have a work around in my css. I was referring to the configuration in Caspio as shown in the below screen shot. These settings do not seem to work. I assume then that this is a bug and we need to override as I have done.

[CoopperBackpack]

Hello @BrianI, now I understand what you meant. 

The border is removed when its size is set to 0px along with color = none and type = none. You may check if setting the size to 0px fixes the issue.