No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    7
    308
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Q-Brad
      Q-Brad last edited by 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 2 Replies Last reply Reply Quote 0
      • dobbel
        dobbel @Q-Brad last edited by

        @Q-Brad

        glow like this?

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

        1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @Q-Brad last edited by dobbel

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

          1 Reply Last reply Reply Quote 0
          • Q-Brad
            Q-Brad last edited by

            @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 1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel @Q-Brad last edited by

              @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);
              }
              
              1 Reply Last reply Reply Quote 0
              • Q-Brad
                Q-Brad last edited by

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

                1 Reply Last reply Reply Quote 0
                • Q-Brad
                  Q-Brad last edited by 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! 😃

                  e5394d18-cf68-45a5-a541-162c44c0f4ed-image.png

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post