input:focus as variable color

[xxbillouxx]

I would like to reopen the issue 517. Thx

#517

[mmadden]

+1

[mdo]

Sorry, we won't be reopening this. The purpose of the box-shadow focus style is that the default style for focuses on Macs and Webkit browsers feel unrefined. That said, we still use the default focus in many places (general tabbing, buttons, etc). Mixing the colors and styles of this anymore is just going to lead to more edge cases and usability issues down the line.

Feel free to customize on your end, but the BS core won't make this a variable.

[mmadden]

We're not asking for text inputs to use the default focus styles of the browser. That would defeat the wonderful consistency bootstrap brings to form inputs.

We're simply asking for the color to be a LESS variable so we can more easily match the focus color with the color scheme of the rest of the site/app. I don't understand how introducing @inputBorderFocus would cause any issues above and beyond the hard coded styles. For example:

BEFORE: (current Bootstrap 2.0.2 styles)

input:focus,
textarea:focus {
  border-color: rgba(82,168,236,.8);
  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  .box-shadow(@shadow);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
}

AFTER: (proposed change)

input:focus,
textarea:focus {
  border-color: fade(@inputBorderFocus, 80%);
  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px fade(@inputBorderFocus, 60%);
  .box-shadow(@shadow);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
}

[xxbillouxx]

Agree with mmadden !
+1
Re-open plz

[drsii]

agree mmadden :)

+1 and reopen.

[AmauryCarrade]

I also agree with mmadden!

+1 ; re-open please.

[ahfeel]

Agree.

+1

[nathanpitman]

+1

Yup, I'm looking for a way to do this also... it would almost make sense for the form input:focus state to inherit the defined link colour variable...

[ghost]

+1 and reopen

[twentyfortysix]

+1

[stinaq]

+1

[Linuus]

Agreed!

[gerrywastaken]

-1 Everything should be hard coded, variables are for noobs who don't know how to search and replace! ;-)

[owenversteeg]

+1. Yes, agreed. I don't see any reason why not to do this.

@markdotto's point is a bit moot - if a developer wants to incur potential 'edge cases and usability issues', he/she will, whether or not it's easy or slightly less easy so to change said color. But it'd be mighty nice not to have to ctrl+f for every update and every different website.

[Rylon]

+1 from me too - makes sense to expose the setting to a variable like everything else?

[smbatpetrosyan]

I'm also for reopening.
We'd rather take advantage of variables in Less and make it possible to easily consistently adapt the border colors/shading with the remaining color scheme.

[foiseworth]

Can you please clarify why it is bad to change the border color on input:focus? Thanks!

[nicooprat]

+1

[thiagopnts]

+1

[StabbarN]

+1
I can't find how to change the color when focusing a select element. Would someone please tell me where?

I've changed the:

// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
}

[drewB]

+1

[raad]

+1 for a configurable setting
@markdotto

The purpose of the box-shadow focus style is that the default style for focuses on Macs and Webkit browsers feel unrefined.

That's a fair reason, but you've changed the default and hard-coded part of what is now design aesthetics.
If you're allowing people to customise the design, you can't expect people to accept that one part of the design has a fixed colour and cannot be changed through the mechanisms you have provided for customisation.

That said, we still use the default focus in many places (general tabbing, buttons, etc).

Indeed, but unless I'm mistaken, this property applies just to input fields...

Mixing the colors and styles of this anymore is just going to lead to more edge cases and usability issues down the line.

...so the argument that buttons etc. will end up looking different doesn't carry any weight I'm afraid. In effect, you've already mixed the colours and styles by providing a focus state colour to begin with.

Can't see the harm in 1 additional variable, with the default set as it is now, and allowing everyone to just get on and change as they wish...

[axsuul]

I also see no harm in introducing such a variable. I am all for a more customizable BS. This input focus glow immediately gives it away that the site is using Twitter BS. It's also a pain to change =/

[flynfish]

+1

[jubari]

+1, using twitter-bootrstrap-rails, placed this in my bootstrap_and_override.css.less

@inputBorderFocus: #51A351;

textarea:focus, input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus {
  border-color: fade(@inputBorderFocus, 80%);
  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px fade(@inputBorderFocus, 60%);
  .box-shadow(@shadow);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
}

[BruceClark]

+1 couldn't agree more. Great help @jubari thx.

[calvinjuarez]

+1

[ootoovak]

Best I've done so far to override both TB2.1 and Chrome's blue box-shadow (in SASS). Doesn't quite work with select elements so would be nice if someone has solved that part to post it here. It is a shame this is not easier.

$highlight-focus: #8cb44e

textarea,
select,
a,
button,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
input[type="radio"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
.uneditable-input,
.btn
  &:focus
    border-color: rgba($highlight-focus, 0.8)
    outline: 0
    outline: thin dotted \9 // IE6-9
    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($highlight-focus, 0.6)})

[BruceClark]

Can you clarify why? The above explanation by @mmadden seems to make sense to most of us on this thread.

I understand the idea of having focus feel consistent for people on Mac Webkit browsers, per your explanation. But as soon as focus coloring was introduced in BS it broke down the default feel of browsers on the Window's side. That never seemed to be an issue.

In my opinion, if the argument is usability issues then this shouldn't have been done from the beginning. But, we all like it, even on Windows it looks great and feels right, so why not just allow the color to change without hacking it?

[caseyohara]

+1

[Rylon]

I totally agree with @BruceClark - there really hasn't been an adequate explanation of why this is being rejected. Since we're already changing all the default styles, and making most of them configurable through a variable, this doesn't seem any different to me.

[philsalesses]

If you think of your your users, we're going to do what we want anyway... why not make it easy for us? If there are this many people that want it to be a variable, than add it in as a variable. You can leave it's default the same, but at least let us configure it! +1

[mdo]

Just to reiterate: we are not going to implement this.

Modify it on your own if you want, but know that you're going down a dangerous path of screwing with default browser behavior and expectations of your users. Folks recognize that outline (whether it's via box-shadow or outline). We won't be facilitating that anymore than the customizations we've already made.

[tarciozemel]

This isn't democracy, folks... =(

[tassoevan]

"the default style for focuses on Macs and Webkit browsers feel unrefined"
Can you explain this better, @mdo?

[Hansaplast]

Let me first say that I respect the work that has been done with Bootstrap, and as a developer, I agree that it's developers choice to reject requests.

I'm still a little in the dark "why" though ...
Bootstrap allows non-standard tooltips, a search-box without a search button, and certain browsers and websites do not even have a focus color.

Not that it matters, mdo was pretty clear about it, but a +1 for me as well.
I like the focus color to match the style of my design, and I'm 100% convinced it will not confuse my users.

[vladikoff]

If you are running a different theme in OS X, you don't even get the default 'Blue'

In 'Graphite' you get gray.

Anyway, there's no real reason this can't be a variable. The fact that the ":focus" LESS rule takes up 30 lines makes this a lot worse.

[nickelfault]

Another +1 here. It looks pretty bad when you start adjusting the colors and you're stuck with the blue glow, which matches no other part of the styles.

[owenversteeg]

Another +1

[punund]

+1.
I don't understand why having a variable is bad. Those who need it hack it in anyway.

[bourgeois]

I'm also interested in this !

[skuteli]

+1

[pavelnikolov]

+1

[guigs]

+1

[ghost]

+1

[benharold]

+1

[panlilu]

+1

[vin-ai]

👎

[vfonic]

+1

It's just so many votes for making this a variable, yet so few work needs to be done on BS core. I see this as a win-win situation. You make this a variable in two lines and make everybody happy. Thanks!

[cvrebert]

https://twitter.com/mdo/status/332205756512362496