微信小程序的獲取手機(jī)號碼按鈕如何重新定制樣式？

如圖，小程序示例里

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

我在保存信息哪個(gè)按鈕的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">手機(jī)：</view>
                </view>
                <view class="weui-cell__bd">
                   <view class="weui-getPhoneNumber" >
                   <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 自動獲取手機(jī)號碼 </button>
                   </view>
                </view>
            </view>

希望達(dá)到的效果

既希望將按鈕樣式改為input的樣式，如何實(shí)現(xiàn)？