目前,placeholder="Your best email"
没有风格的风格:inputText
。
在检查元素时,user agent stylesheet
被用于input, textarea, select, button {}
。
以下是我的代码:
import React from "react";
import {css} from "@emotion/core";
const inputText = css`
::placeholder {
float: left;
height: 35px;
width: 230px;
color: #FFF;
font-family: "Work Sans";
font-size: 30px;
font-weight: 700;
line-height: 35px;
}
`
const inputRound = css`
box-sizing: border-box;
height: 85px;
width: 460px;
border-radius: 100px;
border: 5px solid #FFF;
background-color: transparent;
outline: none;
`
const Subscribe = () => (
<div css={{
display: 'flex'
}}>
<h2>Stay tuned</h2>
<form name="subscribe" method="POST" data-netlify="true">
<p css={inputText}>
<input placeholder="Your best email" type="email" name="email" css={inputRound}/>
</p>
<p >
<button type="submit"><h3>Subscribe</h3></button>
</p>
</form>
</div>
)
export default Subscribe
什么阻止inputText
风格被应用?
这是开发工具的截图(PS inputText
已根据建议改为& > ::placeholder
。
您必须将inputText
样式直接应用于输入:
// Change this
- <p css={inputText}>
- <input css={inputRound}/>
- </p>
//to this
+ <p>
+ <input css={[inputText, inputRound]}/>
+ </p>
或者,替代地,从inputText
目标子输入:
const inputText = css`
& > input::placeholder {
...
}
`