将外观输入字段更改为“数据报警器”中的按钮
将外观输入字段更改为“数据报警器”中的按钮
提问于 2017-06-30 21:53:16
我有输入字段，我想把它更改为按钮。让它看起来像
相反，
换个标签就行了。我怎么能这么做？
class MyComponent extends React.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker();
}
render(){
return (
<div>
<h3>Choose date!</h3>
<input type='text' ref='datepicker' />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<div id="app"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-30 21:58:58
输入的样式为按钮：
Demo:http://jsfiddle.net/GCu2D/1996/
CSS:
.input {
background: #216BA5;
border: 1px solid #216BA5;
cursor: pointer;
color: #FFF;
padding: 5px 10px;
border-radius: 4px;
text-align: center}
<input readonly type="text" class="input" value="2017-07-1" />readonly属性是必需的，以使输入可以单击和不可编辑。
如果您可以将type="text"更改为type="button"，那么：
<input type="button" class="input" value="2017-07-1" />不需要readonly。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44857820
复制相关文章
点击加载更多
相似问题
将按钮的外观改为圆形按钮
将file_field_tag外观更改为按钮外观
将选择标签的外观更改为单选按钮
如何将活动按钮的外观更改为有箭头指向的外观
外观更整洁的TCL GUI TK按钮
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
