我有一个非常奇怪的错误,我无法弄清楚为什么按钮的整个“红色区域”都不可点击。
下面附上了所发生情况的图像。
当我移动到发送中的 D 字符时,它立即变得不可点击。在整个红色区域中,D 字符右侧的所有内容都不可点击。
整个表单的 HTML 如下。这是使用 React 完成的,所以我包含了该代码以防万一它出于某种原因相关。
import React, { Component } from 'react';
import { FormGroup, FormControl, Button } from "react-bootstrap";
import MaskedFormControl from 'react-bootstrap-maskedinput'
export default class defaultHomeForm extends Component {
render(){
return(
<form onSubmit={this.props.handleSubmit}>
<FormGroup
controlId="formName"
validationState={this.props.formValidation("name")}
className="quote-fields"
>
<FormControl
type="text"
name="name"
placeholder="Name"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formPhone"
validationState={this.props.formValidation("phone")}
className="quote-fields"
>
<MaskedFormControl
type='text'
name='phone'
mask='(111)-111-1111 x11111'
placeholder="Phone"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formEmail"
validationState={this.props.formValidation("email")}
className="quote-fields"
>
<FormControl
type="email"
name="email"
placeholder="Email"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formAddress"
validationState={this.props.formValidation("address")}
className="quote-fields"
>
<FormControl
type="text"
name="address"
placeholder="Address"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
</form>
);
}
}
显然 CSS 是查找这些错误的第一个地方,因此我在此处附上了我的 SCSS 文件中相关的部分。
%send-btn {
padding: 5px;
.send-btn-text{
background-color:red;
}
.btn {
background: transparent;
border: none;
font-size: 25px;
font-weight: 500;
color: #fff;
text-transform: uppercase;
display: flex;
align-items: center;
&:hover{
color: #1899d1;
}
i {
&:first-child {
padding-left: 5px;
}
}
}
}
%quote-fields {
padding: 0px 15px 10px;
margin: 0px;
.form-field {
background: transparent;
padding: 12px;
height: 43px;
margin-bottom: 12px;
color: #ffffff;
border-radius: 2px;
border: 1px solid #dcdcdc78;
}
}
如果我遗漏了您需要查看的任何其他 SCSS/CSS,请告诉我,我会立即上传。
我尝试过的事情:
我曾尝试将显示更改为内联 block 而不是 flex,但没有用。 我已经尝试为控件添加宽度,但仍然不行。
我不确定是什么导致了这种奇怪的效果。欢迎提出任何想法,我会立即尝试。
我也曾尝试与检查员打交道,以便即时(实时)更改 CSS 属性,看看我是否可以通过某种方式使该区域可点击,但仍然没有成功。
我应该提到我正在使用 Google Chrome 版本 67.0.3396.87 在 Mac 上进行测试
附件是一张检查员的图片,显示 DIV 在理论上应该没问题。
最佳答案
好的结果是我想通了,感谢这里的答案:Only the left half of the button is clickable in IE
在我的设计中,泳池清洁器的形象妨碍了它,因为它的位置是绝对的。
通过向该元素添加 CSS pointer-events: none;
它解决了这个问题。
关于html - 按钮只能部分点击错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51127346/