css - HowTo:将输入到输入框中的第一个单词的首字母大写
问题描述
因此,我尝试将输入到输入框中的第一个字符大写,但未成功,如下所示:
样式化组件
const SearchStyles = styled.div`
position: relative;
input {
width: 100%;
padding: 10px;
border: 0;
font-size: 2rem;
&.loading {
animation: ${glow} 0.5s ease-in-out infinite alternate;
}
&:first-letter {
text-transform: uppercase;
}
}
`;
反应
<input
{...getInputProps({
type: 'search',
placeholder: 'Search For An Item',
id: 'search',
className: this.state.loading ? 'loading' : '',
onChange: e => {
e.persist();
this.onChange(e, client);
},
})}
/>
我该如何解决这个问题?
解决方案
就目前的情况使用 CSS 是不可能的。您需要改用 contenteditable 。
<input type="text" value="lowercase value" />
<br>
<div id="fakeinput" contenteditable>lowercase value</div>
input::first-letter {
text-transform: uppercase;
}
#fakeinput {
display: inline-block;
margin-top: 1em;
width: 200px;
border: 1px solid red;
padding: 1em 2em;
color: #000;
&::first-letter {
text-transform: uppercase;
}
}
推荐阅读
- java - 是什么阻止了 KEYCODE_POWER 和 KEYCODE_SLEEP 的使用
- apache-kafka - 卡夫卡流异常:GroupAuthorizationException
- mysql - MySQL:用户登录失败
- c++ - while循环内部的易失性强制转换
- java - 如何在 Java 中声明无法访问的代码?
- node.js - Node.js Express:当用户直接搜索 .html 文件时处理请求
- python - 如何融化数据框以获取范围之间的所有日期?
- java - Spring MVC maven项目中Tomcat8的插件名称是什么
- c++ - 单独源文件中的 SFINAE 模板专业化
- oracle - 未使用存储过程创建索引 - Oracle