Password Input styling question

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

09 Jul 2021, 00:49

In the Login.vue component, I'm using a <Password> component instead of a standard input so I can utilize the 'toggleMask' prop, however the left border is rounded unlike the email input.

How do I override the style to get sharp corners on the left side of the input? I tried adding a class to override these values, but had no luck.

Image

Code: Select all

<Password v-model="password" :toggleMask="true" :feedback="false" />
Full context:

Code: Select all

          <div class="p-inputgroup p-mt-3 p-mb-5">
            <span class="p-inputgroup-addon">
              <i class="pi pi-lock"></i>
            </span>
            <span class="p-float-label">
              <Password v-model="password" :toggleMask="true" :feedback="false" />
              <label for="password">Password</label>
            </span>
          </div>

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

09 Jul 2021, 09:52

Hi,

You can use

Code: Select all

::v-deep(.p-inputgroup > .p-float-label:last-child > .p-password.p-component > .p-inputtext.p-component) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
Best,

DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

09 Jul 2021, 16:41

That worked great, thanks!

Doug

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

12 Jul 2021, 08:28

Nice to hear that!

Post Reply

Return to “Ultima - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests