Css 清除蓝色高光有困难吗

我一直在做一个有可展开/可折叠部分的部分。当我点击一个部分来展开或折叠它时，会显示一个蓝色的焦点区域，但它被放置在一个奇怪的角度上。我不知道是什么原因导致了它，我希望有一个解决方案，要么摆脱它，要么把它放回正常的水平角度。有人对如何解决这个问题有什么建议吗

我使用的是Macbook和Chrome浏览器

该组件出现在其中的整个灰色块以一个角度放置，从下面附着的图像顶部可以看到，但与高亮显示的焦点区域方向相反

我的css：

@import '../../theme/variables.css';

.rotatedSection {
  padding-bottom: 2rem;
}

.container {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  padding: 2rem 0;
  @media screen and (max-width: 68rem) {
    margin: 0 3rem;
  }
}

.accordianContainer {
  flex: 1;
  margin-right: 2rem;
  min-width: 500px;
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-right: 0;
  }
  @media screen and (max-width: 900px) {
    min-width: 0;
  }
}

.imageContainer {
  flex: 1;
  margin-left: 2rem;
  max-height: 300px;
  display: flex;
  justify-content: center;
  img {
    flex: 1;
  }
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-left: 0;
  }
}

.heading {
  composes: h2 from 'theme/text';
  margin-left: auto;
  margin-right: auto;
}

我的反应代码：

import React, {Component, PropTypes} from 'react';

import RotatedSection from 'components/RotatedSection';
import AccordionItem from './AccordionItem';

import css from './styles.css';

class AccordionSectionWithImage extends Component {
  constructor (props) {
    super(props);

    this.state = {
      activeIndex: null,
    };

    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.setActive = this.setActive.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  onOpen = (index) => {
    this.setActive(index);
  };

  onClose = (callback = () => null) => {
    this.setActive(null);
    callback();
  };

  setActive = (activeIndex) => this.setState({activeIndex});

  handleClickOutside = () => this.props.collapseOnBlur && this.onClose();

  render () {
    const {
      entry: {
        items,
        heading,
        image,
      },
      showIndex,
      classNames,
      meta = {},
    } = this.props;

    const {routeParams, toggleHamburger} = meta;
    const {activeIndex} = this.state;

    return (
      <RotatedSection color='whisper' className={css.rotatedSection}>
        <div className={css.container}>
          <div className={css.accordianContainer}>
            <h2 className={css.heading}>{heading}</h2>
            {items && items.map((item, index) => (
              <AccordionItem
                key={index}
                showIndex={showIndex}
                entry={item}
                meta={{
                  position: index,
                  isOpen: (index === activeIndex),
                  onOpen: () => this.onOpen(index),
                  onClose: () => this.onClose(),
                  onChildClick: () => this.onClose(toggleHamburger),
                  routeParams,
                }}
                classNames={classNames}
              />
            ))}
          </div>
          <div className={css.imageContainer}>
            <img src={image && image.fields && image.fields.file.url} alt='Educational assessment' />
          </div>
        </div>
      </RotatedSection>
    );
  }
}

AccordionSectionWithImage.propTypes = {
  meta: PropTypes.object,
  entry: PropTypes.object,
  collapseOnBlur: PropTypes.bool,
  showIndex: PropTypes.bool,
  classNames: PropTypes.object,
};

export default AccordionSectionWithImage;

import React，{Component，PropTypes}来自'React'；
从“组件/旋转节”导入旋转节；
从“./AccordionItem”导入AccordionItem；
从“/styles.css”导入css；
类AccordionSectionWithImage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
activeIndex:null，
};
this.onOpen=this.onOpen.bind（this）；
this.onClose=this.onClose.bind（this）；
this.setActive=this.setActive.bind（this）；
this.handleClickOutside=this.handleClickOutside.bind（this）；
}
onOpen=（索引）=>{
这个.setActive（索引）；
};
onClose=（回调=（）=>null）=>{
此.setActive（空）；
回调（）；
};
setActive=（activeIndex）=>this.setState（{activeIndex}）；
handleClickOutside=（）=>this.props.collapseOnBlur&&this.onClose（）；
渲染（）{
常数{
条目：{
项目，
标题
形象,，
},
显示索引，
类名，
meta={}，
}=这是道具；
const{routeParams，toggleHamburger}=meta；
const{activeIndex}=this.state；
返回(
{标题}
{items&&items.map（（项目，索引）=>(
此.onOpen（索引），
onClose:（）=>this.onClose（），
onChildClick:（）=>this.onClose（切换汉堡），
路线图，
}}
classNames={classNames}
/>
))}
);
}
}
AccordionSectionWithImage.propTypes={
meta:PropTypes.object，
条目：PropTypes.object，
collapseOnBlur:PropTypes.bool，
showIndex:PropTypes.bool，
类名：PropTypes.object，
};
导出默认的AccordionSectionWithImage；

单个截面的反应组件：

function AccordionItem (props) {
  const {
    meta: {
      isOpen,
      onOpen,
      onClose,
    },
    entry: {
      heading,
      text,
    },
  } = props;

  const handleClick = () => (isOpen ? onClose() : onOpen());

  return (
    <div className={css.itemContainer}>
      <div className={css.innerContainer}>
        <h3 className={css.heading} onClick={handleClick}>
          <span className={css.titleText}>{heading}</span>
          <i className={`zmdi zmdi-plus ${css.titleToggle}`} />
        </h3>
        {isOpen && (
          <div className={css.contents}>
            {text}
          </div>
        )}
      </div>
    </div>
  );
}

功能手风琴项目（道具）{
常数{
元：{
伊索本，
奥诺彭，
一旦失去，
},
条目：{
标题
文本，
},
}=道具；
常量handleClick=（）=>（isOpen？onClose（）：onOpen（））；
返回(
{标题}
{isOpen&&(
{text}
)}
);
}

对于遇到类似问题的任何其他人：

问题只出现在手机和chrome inspector的设备模式上。这是由于“点击高光”属性造成的

---

设置-webkit点击突出显示颜色到rgba（0,0,0,0）隐藏了问题，但这是一个非标准css属性，因此解决方案可能不适用于所有设备/浏览器/用户。

它可能是继承的样式。您必须使用Chrome inspect来查看它是什么元素，以及它为什么采用这种样式。它可能是一种混合样式，其中一种样式应用颜色，另一种样式应用旋转。我无法在Chrome inspector中找到该元素。这似乎是一种积极的风格，但将这种积极的特质强加于该区域的所有元素上并不能重现它。只是点击它。我在你发布的CSS中没有看到这种样式。您必须使用inspector进行探索才能找到它。进一步的调查显示，只有当chrome inspector处于设备模式时，才会出现这种情况。因此，可能是与点击选择关联的样式。