0

I am using "vuesax": "3.11.1" in my VueJS project.

I can't find a way to change the border of the input of vs-input disabled.

<vs-input
  class="w-5/12 pr-5"
  disabled
  type="text"
  :placeHolder="timeConvert(info.delay_secs)"
  :style="getDelayColor(info.status_color)"
  label="Advance / Late"
/>

I tried applying an inline style (style="border: 1px solid #ff0000;"), but it gets applied to the whole component (the red one in the image attached), while I need to change the color of the border of the input inside of it (the green one in the image attached). enter image description here

Inspecting the html it looks it is vs-inputx vs-input--input normal, but if I try adding css style to this class it doesn't work.

Same problem for adding dynamic style to it, using :style and passing a function to it (usual Vue way of doing it - it could also be written as :style="`color: ${info.status_color};`"). If I apply it to the vs-input it doesn't have effect. I don't know how to target the element inside of it (the green one in the image attached), because it's not in the template.

Is there any expert of Vuesax library?

Thanks in advance

the_flucs
  • 217
  • 1
  • 6
  • 21
  • I also stacking same issue. Any response? – Honest Knight Nov 24 '20 at 07:01
  • Unfortunately not, at the moment I can't check how I managed to sort it out, the code looks as the example, but can't see how it looks in the browser (need to run a service I do not have access to). Try upvoting the question so it get noticed and maybe it can reach someone else. As soon as I have the chance to look into it I will, and get back to you. – the_flucs Nov 24 '20 at 09:08

0 Answers0