el-form中设置input圆角
时间: 2023-06-09 15:08:48 浏览: 282
你可以在 el-form 中的 input 上设置 "border-radius" 属性来实现圆角。例如:
```
<el-form>
<el-form-item label="姓名">
<el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入姓名" :style="{borderRadius: '50px'}"></el-input>
</el-form-item>
</el-form>
```
这样就可以将 input 的圆角设置为 50px。你可以根据需要调整圆角大小。
相关问题
.login { display: flex; justify-content: center; align-items: center; height: 100%; background-color: rgba(184, 153, 90, 0.62); } .login-box { width: 1000px; height: 474.38px; border-radius: 8px; display: flex; } .login-box img { width: 60%; height: auto; } .title { margin: 0px auto 30px auto; text-align: center; color: #707070; } .login-form { background: #fdfdfd; width: 40%; border-radius: 0px 8px 8px 0px; display: flex; justify-content: center; align-items: center; } .login-form .el-form { width: 214px; height: 307px; } .login-form .el-form-item { margin-bottom: 30px; } .login-form .el-form-item.is-error .el-input__inner { border: 0 !important; border-bottom: 1px solid #fd7065 !important; background: #fff !important; } .login-form .input-icon { height: 32px; width: 18px; margin-left: -2px; } .login-form .el-input__inner { border: 0; border-bottom: 1px solid #e9e9e8; border-radius: 0; font-size: 14px; font-weight: 400; color: #333333; height: 32px; line-height: 32px; } .login-form .el-input__prefix { left: 0; } .login-form .el-input--prefix .el-input__inner { padding-left: 26px; } .login-form .el-input__inner::placeholder { color: #aeb5c4; } .login-form .el-form-item--medium .el-form-item__content { line-height: 32px; } .login-form .el-input--medium .el-input__icon { line-height: 32px; } .login-btn { border-radius: 17px; padding: 11px 20px !important; margin-top: 10px; font-weight: 500; font-size: 14px; border: 0; background-color: #ffc200; } .login-btn:hover, .login-btn:focus { /* background: #FFC200; */ /* color: #ffffff; */ } .login-form-title { height: 36px; display: flex; justify-content: center; align-items: center; margin-bottom: 40px; } .login-form-title .title-label { font-weight: 500; font-size: 20px; color: #333333; margin-left: 10px; }
这是一段 CSS 样式代码,用于设置登录页面的样式。其中包括登录框的大小、颜色、输入框的样式、按钮的样式等。它使用了 flex 布局来使页面元素居中对齐,并使用了 border-radius 属性来设置圆角。此外,它还定义了:hover 和:focus 状态下按钮的样式,使用户能够在鼠标悬停或聚焦时获得反馈。
document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => { let textAlign = 'left' if(this.contents.inputFontPosition == 2) textAlign = 'center' if (this.contents.inputFontPosition == 3) textAlign = 'right' el.style.textAlign = textAlign el.style.height = this.contents.inputHeight el.style.lineHeight = this.contents.inputHeight el.style.color = this.contents.inputFontColor el.style.fontSize = this.contents.inputFontSize el.style.borderWidth = this.contents.inputBorderWidth el.style.borderStyle = this.contents.inputBorderStyle el.style.borderColor = this.contents.inputBorderColor el.style.borderRadius = this.contents.inputBorderRadius el.style.backgroundColor = this.contents.inputBgColor })这段代码是干嘛的
这段代码是在对网页中class为"form-content"下的class为"slt"下的所有输入框(el-input__inner)进行样式设置,包括设置文本对齐方式、高度、行高、颜色、字体大小、边框宽度、边框样式、边框颜色、边框圆角和背景颜色。具体的样式设置取决于该网页中的一些变量(如inputFontPosition、inputHeight、inputFontSize等)。
阅读全文