elementUI的form表单样式

关注

原创最新推荐文章于 2026-03-29 03:24:51 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

ElementUI表单校验必填项不显示星号？3分钟排查指南（附正确写法）本文针对ElementUI表单校验中必填项红色星号不显示的问题，提供了一份3分钟快速排查指南。文章深入剖析了星号显示的底层逻辑，指出关键在于`prop`属性与`rules`规则中`required: true`的正确关联，并详细列出了从检查`prop`拼写、`rules`数组结构到排查CSS样式覆盖的完整步骤。同时，文中还提供了动态表单、嵌套字段等复杂场景下的正确写法与最佳实践代码片段，帮助开发者高效解决这一常见问题。阅读详情

/*form表单的样式*/
  /deep/ .demo-form-inline {
    height: 30px;
    line-height: 30px;
    margin-left: 43px;
    //label样式
    .el-form-item__label {
      color: #D0E9FF;
      font-size: 14px;
      line-height: 30px;
    }

    //输入框样式
    .el-input__inner {
      background: transparent;
      height: 30px;
      line-height: 30px;
      border: 1px solid #D0E9FF;
      color: #FFFFFF;
      border-radius: 0;
    }

    //提示文字样式
    .el-input__inner::-webkit-input-placeholder {
      color: rgba(208, 233, 255, 0.5);
      font-size: 14px;
    }

    //form-item的样式
    .el-form-item__content {
      line-height: 30px;
      position: relative;
      font-size: 14px;
    }

    //日期选择背景颜色
    .el-range-editor .el-range-input {
      background: transparent;
      color: #fff;
    }

    .el-date-editor .el-range-separator {
      color: #D0E9FF;
    }

    .el-date-editor .el-range__icon {
      line-height: 25px;
    }

  }

收录于