网站制作公司品牌,网上花店网页制作素材,四川建设培训网,网站flash引导页【CSS】关于表单样式 关于表单样式一、文本框样式二、选框样式三、按钮样式四、下拉框样式 关于表单样式 【注意】#xff1a;以下样式只在Chrome浏览器下设置成功#xff0c;其它浏览器可能有所差异#xff0c;需要单独设置、自行调整 一、文本框样式 正常情况下#xff0… 【CSS】关于表单样式 关于表单样式一、文本框样式二、选框样式三、按钮样式四、下拉框样式 关于表单样式 【注意】以下样式只在Chrome浏览器下设置成功其它浏览器可能有所差异需要单独设置、自行调整 一、文本框样式 正常情况下普通文本框的样式如下未聚焦和聚焦状态 首先文本框的样式大部分都可以通过我们已知的CSS属性进行修改 input[typetext] {/* 通过width/height设置宽高 */width: 100px;height: 30px;/* 设置字体样式 */font-size: 18px;font-weight: bold;/* 设置内边距 */padding: 0 5px;
}然后最重要的应该是边框样式的设置也是我们非常熟悉的border属性 PS以下样式的设置是在上面样式设置的基础上进行的 input[typetext] {/* 通过border设置边框样式 */border:5px solid red;border-radius: 8px;
}【注意】如果不设置边框样式就会出现下面图片中第一种情况即左上部分的颜色要暗一点 其次当聚焦时文本框周围会有一圈轮廓我们可以通过outline属性来控制 input[typetext] {/* 通过outline设置轮廓 */outline-style: dashed;outline-offset: 5px;outline-color: dodgerblue;outline-width: 5px;/* outline: none; */
}解析 outline-offset即轮廓对文本框的偏移量可以为负数负数即显示在文本框内部 outline-color轮廓颜色 outline-width轮廓宽度 outline-style轮廓样式 【注意】如果设置了轮廓样式则轮廓会常显不设置样式则默认在聚焦时才显示默认样式为直线轮廓无法圆角 一般情况设置outline:none即可 (隐藏轮廓) 接下来通过:focus伪类来控制文本框聚焦时的样式 input[typetext]:focus {/* 聚焦时样式 */box-shadow: 0px 0px 12px -1px #b1c1c3;
}添加聚焦时的样式如阴影轮廓样式等等 还可以通过:placeholder伪类来控制提示信息的样式 input[typetext]::placeholder {/* 提示信息样式 */font-size: 14px;color: rgba(136, 127, 127, 0.774);
}二、选框样式 结合label标签为绑定的选框设置样式 前提条件标签的for属性要与选框的id属性相同即进行了绑定 实现思路 隐藏选框再为label标签添加::before伪类或者::after伪类通过这个伪类设置新的样式结合选框的:checked伪类属性设置选中状态时的样式 实现过程以单选框为例 隐藏单选框 input[typeradio] {/* 直接设置大小为0 */width: 0;height: 0;
}添加伪类 label::before {content: ;display: inline-block;/* 用vertical-align来对齐文本 */vertical-align: middle;width: 20px;height: 20px;margin-right: 10px;border-radius: 50%;border: 5px solid darkgreen;
} 选中状态 input[typeradio]:checkedlabel::before {background-color: lightgreen;padding: 0px;
}或者直接给label标签设置样式再结合:checked伪类属性设置选中样式
三、按钮样式 先设置基本样式用常用的属性就可以设置 input[typebutton],
input[typesubmit],
input[typereset] {width: 80px;height: 30px;color: white;background-color: #5bb85d;font-size: 18px;font-weight: bold;
}主要是边框样式和文本框样式的边框设置一样使用border属性更改默认的边框样式使用outline属性更改默认轮廓样式 input[typebutton],
input[typesubmit],
input[typereset] {/* borderoutline */border-radius: 3px;border: none;outline: none;
}其它的还可以通过伪类属性设置点击时的样式:active聚焦时的样式:focus等等 四、下拉框样式 基本样式还是可以用已知的属性来设置对于边框仍然采用borderoutline属性来设置 select {width: 150px;height: 30px;color: #444;font-size: 16px;font-weight: bold;/* borderoutline */border-radius: 3px;border: 3px solid skyblue;outline: none;
}通过text-align-last属性来控制下拉框里的文字居中,通过appearance属性隐藏下拉箭头 select {/* 文字间距 */letter-spacing: 2px;/* 文字居中 */text-align-last: center;appearance: none;/* 背景颜色 */background-color: #fff;background: linear-gradient(white, #e5e5e5);
}对于option元素只能设置一般的字体文本样式 option {font-size: 14px;font-weight: bold;color: red;background-color: #adff2f;
}只有字体文本样式才会生效 无法设置位置样式、悬浮样式 背景颜色无法透明透明时默认白色 因此要更改option的样式只能通过其它元素模拟来实现下拉框 其它的在行内设置样式size属性和multiple属性 select size2.../select表示显示两个选项出来 这时下拉框里的内容被option里的内容填充显示数量为两个选项且此时通过滚动来切换显示 select{/* 取消高度 *//* height:30px *//* 文本垂直方向居中对齐 */vertical-align: middle;
}select multiple.../select可以搭配size属性设置具体的显示数量 鄙人拙见不足之处万望海涵
