首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >将外观输入字段更改为“数据报警器”中的按钮

将外观输入字段更改为“数据报警器”中的按钮
EN

Stack Overflow用户
提问于 2017-07-01 05:53:16
回答 1查看 328关注 0票数 1

我有输入字段,我想把它更改为按钮。让它看起来像

相反,

换个标签就行了。我怎么能这么做?

代码语言:javascript
代码运行次数:0
运行
复制
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')
);
代码语言:javascript
代码运行次数:0
运行
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-01 05:58:58

输入的样式为按钮:

Demo:http://jsfiddle.net/GCu2D/1996/

CSS:

代码语言:javascript
代码运行次数:0
运行
复制
.input {
  background: #216BA5;
  border: 1px solid #216BA5;
  cursor: pointer;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center

}

代码语言:javascript
代码运行次数:0
运行
复制
  <input readonly type="text" class="input" value="2017-07-1" />

readonly属性是必需的,以使输入可以单击和不可编辑。

如果您可以将type="text"更改为type="button",那么:

代码语言:javascript
代码运行次数:0
运行
复制
<input type="button" class="input" value="2017-07-1" />

不需要readonly

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44857820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档