[Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?
-
I understand how the glow effect works in CSS, but applying it to a Quasar outlined text input field is alluding me to no end.
Has anyone tried/achieved this?
-
-
@Q-Brad you should try
standout
of q-input. -
@dobbel Yes, that’s the type of glow I’m looking for. I’ve tried standout… I don’t see how to manipulate that to get the blue glow. Any other ideas?
-
don’t have codepen here right now, but this will give a q-input a glow. It does not remove quasar style or is in any way perfect. Works best with the
borderless
q-input right now.input[type=text]:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); }
-
@dobbel Hey wow… that’s a good start. I’m going to try to work with that.
-
@dobbel So what I did was the following and it works perfectly so far:
In app.sass
.lm-input-hilight.q-field--focused.q-field--outlined .q-field__control::after box-shadow: 0 0 5px rgba(81, 203, 238, 1) border: 1px solid rgba(81, 203, 238, 1)
I then simply applied my lm-input-hilight class as follows:
<q-input outlined dense class="lm-input-hilight" v-model="lmGlobalSearch" bg-color="white" placeholder="Search..."> <template v-slot:prepend> <q-icon class="text-grey-5" name="search" /> </template> </q-input>
Thanks for your input, it led me to where I needed to be!