微信小程序的获取手机号码按钮如何重新定制样式？

Question

如图，小程序示例里

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button>

我在保存信息哪个按钮的css是这么写的

.weui-btn-area {
    margin: 1.7rem 15% 1rem;
}
button::after {
    border-color: #00AF32;
}
button[type="primary"] {
    color:#FFF;
    background-color:#00AF32;
}
.button-hover[type="primary"] {
    color:#00AF32;
    background-color:#FFF;
}

.weui-getPhoneNumber{
  margin: 0.5rem 20% 0.5rem;
}

前端部分

<view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机：</view>
                </view>
                <view class="weui-cell__bd">
                   <view class="weui-getPhoneNumber" >
                   <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 自动获取手机号码 </button>
                   </view>
                </view>
            </view>

希望达到的效果

既希望将按钮样式改为input的样式，如何实现？

Answer 1

没写过小程序,不过应该可以在点击input的时候模拟点击获取手机号的按钮吧