網頁端&小程式的前端note:form的button去掉圓角
阿新 • • 發佈:2019-02-13
form裡面的button按鈕是預設帶圓角,相信很多人都會在釋出版本後被上級或測試要求去掉圓角,出於form自帶的提交按鈕使用效果非常滿意,很多人仍會保留該提交button,樣式的修改下圖有
至於form的提交事件,官網非常詳細
注意:form是不會攜帶view控制元件的值,而且 value和name缺一不可。
<form bindsubmit="formSubmit">
<view class="l-ct">
<view class="edit-field">
<text>聯絡人:</text>
<input type="text" name="addressName" id="addressName" maxlength="25" value="{{addressName}}" bindinput="bindNameInput" placeholder="請填寫收貨人姓名"/>
</view>
<view class="addr-v">
<button formType="submit" class="addr-button">儲存地址</button>
</view >
<view wx:if="{{addressId}}" class="addr-v">
<view class="addr-button-del" bindtap="deleteAddress" id="{{addressId}}">刪除地址</view>
</view>
</view>
</form>
在wxss檔案中新增即可,我是直接加在app.wxss,避免後人被坑
/*button按鈕沒有圓角 */
button::after {
border-radius : 0;
}
button{
border-radius: 0;
}
網頁端,待補充