profile
viewpoint

Ask questions&:focus not working

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • emotion version:

  • react version:

    "emotion": "^9.2.12", "react": "^16.6.3",

Relevant code:

const cardElementStyle = css`
  border: .2px solid rgba(120,144,149,0.41);
  color: rgba(120,144,149,0.41);
  height: 35px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  &:focus {
    background-color: red !important; // doesn't work
    border: 1px solid rgb(26, 141, 181); // also doesn't work
  }
  &:hover {
    //background-color: red; // works
  }
`;
// inside render()
<CardElement
                className={cardElementStyle} />

What you did: Assigned a background color of red to a Stripe.js CardElement.

What happened:

Nothing happened with the focus pseudoclass. Added !important; no effect either.

It worked as espected with the hover pseudoclass though.

Focus and Hover were tested one at a time to avoid conflicts.

Suggested solution: See what is wrong with :focus in particular.

emotion-js/emotion

Answer questions FezVrasta

I'm going ahead and closing the issue since OP didn't provide a repro after a year

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List