laravelvue.jsvuetify.js

Weird display issue with vuetify in laravel. v-text-field gets an outline on focus

So the problem is… when I focus on the v-text-field, I get an outline which is not desired. And it's only happening in Laravel. When using plain Vue, the problem is not there.

In Laravel + Vuetify Project (See the blue outline? I don't want it there) In Laravel Project

In Vue Project (Desired) In Vue Project

I'm not sure as to why this is happening. Also, this is the first time I'm trying Vuetify with Laravel

The code for both is the same, as below

<v-text-field
  label="Email"
  name="email"
  prepend-icon="mdi-email"
  type="email"
  :color="$store.state.sf_brandColor"
  v-model="login.email"
  @blur="$v.login.email.$touch()"
  :error-messages="login_emailErrors"
/>
<v-text-field
   label="Password"
   name="pass"
   prepend-icon="mdi-lock"
   type="password"
   :color="$store.state.sf_brandColor"
   v-model="login.password"
   @blur="$v.login.password.$touch()"
   :error-messages="login_passwordErrors"
/>

I've tried

input:focus {
  outline:none;
}
input:focus {
  border:none;
}

but it hasn't worked

In the developer tools, I checked the <input> tag. It doesn't have any border on focus.

Dev Tools

Please help, I can't think of more ways to even debug this.

Running

Solution

  • Ok... so just gave a though that maybe something might be interfering with vuetify, so removed tailwind CSS (comes default with Jetstream) as I dont use it.

    And its fixed now.