input 样式

本文介绍了如何使用CSS对input元素进行样式定制,包括去除IE上的×和眼睛图标,设置html5的autofocus属性,关闭浏览器的自动填充功能,以及实现跨浏览器的边距兼容性。此外,还展示了如何美化checkbox,包括改变其默认样式并添加自定义勾选符号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1.input在ie下去掉×和眼睛在ie10+input出现×,password出现小眼睛

::-ms-clear, ::-ms-reveal{display: none;}

2.html5聚焦autofocus

3.可以在input中加入autocomplete="off" 来关闭记录

<input type="text"  autocomplete="off"  autofocus/>

4.兼容各浏览器边距写法

.input-class {
width: 135px;
padding: 10px 15px;
border: none;
background: #fff;
outline: none;
        height: 22px;
font-size: 16px;
color: #696969;
}

5.checkbox样式更改

<input id="exception" class="chk" name="exception" type="checkbox"} value="1"/>
<label for="exception"></label>只查询异常信息


/*checkbox*/
.chk { 
    display: none; 

 
.chk + label { 
    background-color: #FFF; 
    border: 1px solid #aaa; 
    width:15px;
    height:15px;
    box-shadow: none; 
    border-radius: 2px; 
    display: inline-block; 
    position: relative; 
    margin: auto 10px;
    vertical-align: sub;
    cursor:pointer;

.chk + label:active { 
    box-shadow: 0; 

 
.chk:checked + label {  
    border: 1px solid #aaa; 
    box-shadow: none; 
    color: #aaa; 

 
.chk:checked + label:after { 
    content: '√'; /*勾选符号2714*/ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: #aaa; 
    width: 100%; 
    text-align: center; 
    font-size: 12px; 
    padding: 0 0 1px 0; 
    vertical-align: middle; 


### 如何自定义或修改 UniApp 中 Input 组件的样式 在 UniApp 开发过程中,可以通过 CSS 类来实现对 `input` 组件样式的自定义和修改。以下是具体方法以及相关示例。 #### 使用自定义样式类 通过创建一个 `.css` 文件或者 `<style>` 标签内的样式规则,可以为 `input` 定义特定的样式类。随后,在模板文件中将这个样式类绑定到目标 `input` 上即可完成样式定制[^1]。 ```html <template> <view> <!-- 将 custom-input 样式应用于 input --> <input class="custom-input" type="text" placeholder="请输入内容" /> </view> </template> <style scoped> /* 自定义样式 */ .custom-input { height: 50px; /* 设置高度 */ font-size: 16px; /* 字体大小 */ padding: 8px; /* 内边距 */ border: 1px solid #ccc; /* 边框颜色 */ border-radius: 4px; /* 圆角效果 */ } </style> ``` 上述代码展示了如何设置 `input` 的高度、字体大小以及其他视觉属性。开发者可以根据实际需求调整这些数值以满足设计要求。 #### 结合数据交互动态控制样式 如果希望基于某些条件动态改变 `input` 的外观,则可利用 Vue.js 提供的数据绑定机制与计算属性配合工作。例如: ```javascript <script> export default { data() { return { isActive: false, // 控制状态变量 }; }, }; </script> <template> <view> <button @click="isActive = !isActive">切换样式</button> <input :class="{ 'active-style': isActive }" type="text" placeholder="点击按钮切换样式"> </view> </template> <style scoped> .active-style { background-color: yellow; color: red; } </style> ``` 在此例子中,当用户点击按钮时,`input` 元素会在默认样式和激活状态下(背景变黄文字转红)之间切换[^3]。 #### Popup 弹窗中的 Input 风格设定 对于更复杂的场景比如带 popup 弹窗功能的 input ,同样适用以上原则。只需确保弹窗内部也引入了相应的 css 并正确关联至对应的 html 节点上即可[^2]。 ```html <!-- 示例:Popup 中包含 Input --> <popup v-model="showPopup"> <view style="padding: 20px;"> <input class="popup-input" type="text" placeholder="这里是输入框"/> </view> </popup> <style scoped> .popup-input{ width: 100%; box-sizing:border-box ; margin-bottom:1em ; } </style> ``` 这里需要注意的是,由于 popup 往往是一个独立模块,因此其子元素上的样式可能需要额外处理才能生效,如增加作用域限定符等操作。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值