[Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?

Q-Brad

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?

dobbel

@Q-Brad

glow like this?

https://css-tricks.com/snippets/css/glowing-blue-input-highlights/

dobbel

@Q-Brad you should try standout of q-input.

Q-Brad

@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?

dobbel

@Q-Brad

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);
}

Q-Brad

@dobbel Hey wow… that’s a good start. I’m going to try to work with that.

Q-Brad

@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!