Can't seem to edit Input CSS

Can't seem to edit Input CSS

  

Hi all,

I am trying to change the look of my input widget to have a border appear only on the bottom using the CSS code below, however the widget does not change its look:

.input {
  border: 0;
  outline: 0;
  border-bottom: 2px #6490a2;
}

I have used this CSS code snippet in a blank module and it works, but if I use it in a mobile module, the input does not change. Is there a main CSS code that is overwriting mine which is causing this issue and if so how can I access it? Thank you.

Regards,
Jerome

Solution

Hi,

Try using the following CSS:

input[data-input].input {
    border-bottom: 2px solid red;
}

You can determine which CSS is being applied to an element in Chrome by inspecting it, going to the "Computed" tab, hovering over the property you want to check and then clicking the arrow that will appear.

In this case, the CSS being applied is most likely the one defined in "BaseTheme".

Solution

Aurelio Santos wrote:

Hi,

Try using the following CSS:

input[data-input].input {
    border-bottom: 2px solid red;
}

You can determine which CSS is being applied to an element in Chrome by inspecting it, going to the "Computed" tab, hovering over the property you want to check and then clicking the arrow that will appear.

In this case, the CSS being applied is most likely the one defined in "BaseTheme".

Thanks that solved it, I will be using the computed function more now as well.