:focus-within only works when focusing button with keyboard, not with click in Firefox 63
I have a field layout with an outer div (.field) and the label, input and a button inside that field. When I focus the input field, the :focus-within pseudo selector matches, so .field__inner gets an outer border color.
When I use tab to cycle through the elements, the :focus-within matches when I focus the input field or the button.
But when I click the button, :focus-within doesn't seem to 'trigger' (it works in Chrome though).
I've tried to add a tabindex attribute to the button, but that had no effect.
I am using Firefox 63 on macOS.
.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>How can I maintain :focus-within in Firefox when I click the button?
Edit: added animated gif to demonstrate the issue:
html css firefox
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
add a comment |
I have a field layout with an outer div (.field) and the label, input and a button inside that field. When I focus the input field, the :focus-within pseudo selector matches, so .field__inner gets an outer border color.
When I use tab to cycle through the elements, the :focus-within matches when I focus the input field or the button.
But when I click the button, :focus-within doesn't seem to 'trigger' (it works in Chrome though).
I've tried to add a tabindex attribute to the button, but that had no effect.
I am using Firefox 63 on macOS.
.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>How can I maintain :focus-within in Firefox when I click the button?
Edit: added animated gif to demonstrate the issue:
html css firefox
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07
add a comment |
I have a field layout with an outer div (.field) and the label, input and a button inside that field. When I focus the input field, the :focus-within pseudo selector matches, so .field__inner gets an outer border color.
When I use tab to cycle through the elements, the :focus-within matches when I focus the input field or the button.
But when I click the button, :focus-within doesn't seem to 'trigger' (it works in Chrome though).
I've tried to add a tabindex attribute to the button, but that had no effect.
I am using Firefox 63 on macOS.
.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>How can I maintain :focus-within in Firefox when I click the button?
Edit: added animated gif to demonstrate the issue:
html css firefox
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
I have a field layout with an outer div (.field) and the label, input and a button inside that field. When I focus the input field, the :focus-within pseudo selector matches, so .field__inner gets an outer border color.
When I use tab to cycle through the elements, the :focus-within matches when I focus the input field or the button.
But when I click the button, :focus-within doesn't seem to 'trigger' (it works in Chrome though).
I've tried to add a tabindex attribute to the button, but that had no effect.
I am using Firefox 63 on macOS.
.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>How can I maintain :focus-within in Firefox when I click the button?
Edit: added animated gif to demonstrate the issue:
.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>.field__inner {
border: 1px solid #000;
}
.field:focus-within .field__inner {
border: 1px solid #f00;
}<div class="field">
<div class="field__inner">
<label for="password" class="field__label">
Name
</label>
<input type="text" class="field__input" value="">
<button class="field__passwordreveal" type="button">
Click this button!
</button>
</div>
</div>html css firefox
html css firefox
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
edited Nov 21 '18 at 16:14
Thijs Kramer
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
asked Nov 21 '18 at 14:39
Thijs KramerThijs Kramer
920416
920416
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07
add a comment |
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414462%2ffocus-within-only-works-when-focusing-button-with-keyboard-not-with-click-in-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414462%2ffocus-within-only-works-when-focusing-button-with-keyboard-not-with-click-in-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Works fine in ff/chrome and ie/edge don't support it. Clicking the button presents the red border so unable to reproduce.
– Chris W.
Nov 21 '18 at 15:28
Hmm that's odd. I've added an animated gif to demonstrate the issue.
– Thijs Kramer
Nov 21 '18 at 16:07