Change Glowing Blue Input Highlights

Shopify Partner
10 0 0

Hi there,

I have not found a thread for this, but is it possible to change the Glowing Blue Input Highlights for fillable forms to another color? I found this online post if it helps you understand what I'm talking about -> https://css-tricks.com/snippets/css/glowing-blue-input-highlights/

I would like to change the color to something like a glowing purple. I just can't find the code to change :/

I'm currently running Brooklyn Theme

Thanks for any help!

Mitch

0 Likes
Highlighted
Astronaut
1890 0 373

In that example, the color is inputted as a RGBA (red-green-blue-alpha) color code.

rgba(81, 203, 238, 1)

Use a color picker (like this one) to get a color code that you like.  For example, you might end up with:

  box-shadow: 0 0 5px rgb(173, 24, 151);

 

0 Likes
Shopify Partner
196 0 20

EDIT---
@Alex lol beat me to it!
--------

Hi Mitchell,

Quick question, did you use the code in the link you provided? or simply showing us reference?

Either way... from the code in your link 

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD; /* THIS IS THE COLOR */
}
 
input[type=text]:focus, textarea: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); /* THIS IS THE COLOR */
}

The two lines I marked hold the actual color value. The first is in Hex color, the second in RGBa. You can use a tool like This to get the color values you want and swap them out. Note, RGBa would use the same 3 numbers as RGB, but has an additional value for transparency. 

If you want to just use the code which you provided, you can simply copy and paste it into the bottom of your theme's CSS file. Remember, Save a copy of you theme first!!

For simplicty, here is that code with a nice purple! 

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #AB4EFF; /* THIS IS THE COLOR */
}
 
input[type=text]:focus, textarea: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(171, 78, 255, 1); /* THIS IS THE COLOR */
}

Hope that helps!

0 Likes
Shopify Partner
10 0 0

Thanks for the direction you guys! I used the reference link so you would know what I am talking about. The subject seemed somewhat hard to explain.

I was able to add this code to my site for my desired effect... (I wanted the boxed to glow purple when you select the text box field)

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(171, 78, 255, 1);
  border: 1px solid rgba(171, 78, 255, 1); /* THIS IS THE COLOR */
}

If you go to my store's 'Contact Us' page, you will see it's only working for some of the input fields like 'Name' and 'Message' but not 'Email' or 'Phone Number'.  Can you help explain why or how I can fix?

Thanks a BUNCHH!! 

- Mitch

0 Likes
Shopify Partner
196 0 20

Hi Mitch,

My mistake on that one, I should have thought that through a little better.

Change the 

input[type=text]

To just

input

That way it targets all input fields.

1 Like
Shopify Partner
1316 18 185

The "glowing blue" outline is and accessibility indicator, provides a visual guide for the focus event. Lots of people with different impairments need that.

Make sure if you change it to make it still usefull.

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
10 0 0

Thank you Brendin, that worked perfectly!

Mircea, thank you for info and recommendation. I didn't know that. :)

 

- Mitch

0 Likes
Tourist
9 0 2

Hello Brendin I know this is an old post but I have the same problem. I could fix part of it with your tips however I still get the glowing blue around buttons, I'm wondering if you would know what should I do to remove it?

Thank you

0 Likes