Text Field Auto Changes To Blue. Can't Change!

Design help General
1

Hello! I’m having a problem where when a user clicks on a text field, it auto changes to blue on the border, I don’t have this set to blue anywhere in the settings for pressed or focused etc.

Does anyone have any idea why and a way to fix? Thank you!

Screenshot 2021-06-16 at 15.24.39

Here is my site Read-Only: Webflow - Bare Essentials

2

You should be able to change the Focussed state of that field! See here:

3

I also want to point out that, indeed, you do not have the focused state set to blue anywhere and it should be inheriting the color that’s there, but for some reason that I don’t have the answer to, it does not.

So in the focused state if you change this:
Screen Shot 2021-06-16 at 4.42.41 PM

To whatever:
Screen Shot 2021-06-16 at 4.43.34 PM

It will work:
Screen Shot 2021-06-16 at 4.43.40 PM

You can also just change the border color right back to #dbbeb5 and it will work. No idea why, but that will do it.

4

@DroneMotionUK by default search engines style state is set if no properties or instructions is set in the style. you can set focus to no or you can change border and focus color a cleaner way would be to set its focus to none

<style>
    input:focus, textarea:focus, select:focus{
        outline: none;
    }
</style>

if you want it to be a specific color you can change this in the border options on focus.

5

Hello @jmkriz & @neverrain - I’ve tried spending half the day trying what you’ve put forward but it still shows up as blue border when clicked.

@jmkriz - I did the focused option but it’s always showing a white border when I do this, instead of just showing it when clicked and the person is typing in the box. If that makes sense?

6

@DroneMotionUK can you put up a link to the published version for me?

7

Hello @neverrain, here you go: https://bare-essentials-627d97.webflow.io

9

Are you doing it like this video clip shows?

1 Like
10

@DroneMotionUK according to the css the standard css input has no effect but this will

<style>
    .w-input:focus, .w-select:focus{
        border: none !important;
        outline:none !important;
    }
</style>

or you can set you border width to zero in your border style

right now its 0.1 px

11

Hi @jmkriz - Thank you! This worked - I did it before, but Webflow was always selecting the textfield in the editor before hitting preview, so it was always showing as a white border all the time like it was always selected. Sometimes this platform can kill you inside :sweat_smile: Thank you again!