- 基本样式
最基本的输入框样式可以通过CSS的border，padding和margin属性进行设置。例如，我们可以创建一个带有边框和内边距的输入框：
input {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
}- 圆角输入框
如果你想创建一个圆角的输入框，可以使用border-radius属性。例如，以下代码将创建一个具有10像素半径的圆角输入框：
input {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
border-radius: 10px;
}- 阴影效果
你可以使用box-shadow属性为输入框添加阴影效果。例如，以下代码将创建一个具有5像素偏移量和10像素模糊半径的阴影：
input {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
box-shadow: 5px 10px 8px #aaa;
}- 颜色和背景色
你可以使用color属性设置输入框的文字颜色，使用background-color属性设置输入框的背景色。例如，以下代码将创建一个文字颜色为黑色，背景色为白色的输入框：
input {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
color: black;
background-color: white;
}- 尺寸和高度
你可以使用width和height属性设置输入框的尺寸，使用line-height属性设置输入框的高度。例如，以下代码将创建一个宽度为200像素，高度为30像素的输入框：
input {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
width: 200px;
height: 30px;
line-height: 30px;
}- 禁用样式
如果你想禁用一个输入框（例如，当用户点击提交按钮后），你可以使用CSS的disabled伪类来改变其样式。例如，以下代码将禁用的输入框设置为灰色：
input[disabled] {
border: 1px solid #ccc;
padding: 5px;
margin: 2px;
color: gray;
background-color: #eee;
}- 提示文本样式
你可以使用CSS的placeholder属性来设置输入框的提示文本样式。例如，以下代码将提示文本的颜色设置为浅灰色：
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color: lightgray;
}
input::-webkit-input-placeholder { /* Webkit, Blink, Edge (Chrome like) */
color: lightgray;
}以上就是在CSS中创建和样式化输入框的一些基本方法。希望对你有所帮助！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/126081.html
微信扫一扫 