input[type="text"] { border: 1px solid #dcdcdc; padding: 10px; font-size: 16px; border-radius: 3px; box-shadow: 0px 0px 5px #dcdcdc; }
上面的代码片段是一个基本的 CSS 样式,它可以使输入框更加美观。其中,border
定义输入框的边框,padding
定义输入框内部的间距,font-size
定义输入框内文字的字体大小,border-radius
定义输入框的圆角,box-shadow
定义输入框的阴影效果。
需要注意的是,这些样式可以根据自己的需要进行修改。另外,还可以使用伪类选择器来美化不同状态下的输入框,例如:
input[type="text"]:focus { border-color: #ff6a00; box-shadow: 0px 0px 5px #ff6a00; }
上述代码片段表示选中输入框时,输入框的边框颜色和阴影效果都发生改变。
通过 CSS,大家可以轻松地美化表单提交框,提高用户的使用体验。