Question

这是我正在使用的代码段。占位符未显示在UI中。我正在使用antd控件。

<Select placeholder="Select A User Role" value={'RoleID'}>
  <Option value='2'>Company Admin</Option>
  <Option value='3'>Company User</Option>
</Select>

style.css

.ant-select-dropdown {
    max-width: 400px;
    width: 100% !important;
}
.ant-select-selection-selected-value {
    width: 100%;
  }
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
    padding:4px;    
}

tr:nth-child(even){
    background: white;
} 
tr.active { 
background-color: #b3ffb3;
}
thead[class*="ant-table-thead"] th{
    background-color:#000 !important;
    color: white;
    font-weight: bold;
    border-color: #000;
  }
.table_btn
{
    margin:0 !important;
}
.ant-btn
{
    margin:0;
}
.ant-create-invoice-form {
    padding: 24px;   
    margin:24px;
    background: #f1e6ff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }  
  .ant-create-invoice-header-form {   
    height: 25px; 

  } 
.totallblStyle{
    font-size: 14px;
    font-weight: bold;
}
.lblStyle{
    font-size: 12px;
    font-weight: bold;
    padding-top: 10px;
}
.headerlblStyle{
    font-size: 14px;
    font-weight: bold;
    width: 160px;    
    padding-bottom: 10px;   
}
.headerlblDescStyle{
    font-size: 14px;
    font-weight: bold;
    width: 260px;    
}
.userHeader{
    color: #000;
    cursor: pointer;
}
.headerStyle{
    color: #000;   
}

.gx-main-content-wrapper {
    padding: 5px 20px ; 
}
.ant-table-tbody > tr:hover > td {
    color: #fff;
}
.cancel-btn {
  color: #f0ad4e ;
  border-color: #d9d9d9 ;
}
.cancel-btn:hover {
   background-color: #f0ad4e;
    color: #fff;
    border-color: #eea236;
}
.save-btn {
   color: #3d8918 ;
   border-color: #d9d9d9 ;
}
.save-btn:hover {
    background-color:#3d8918 ;
    color: #fff ;
    border-color: #d9d9d9
}
.loginAs {
   text-align: center;
    margin-bottom: 10px;
}
.sign-up 
.gx-app-login-container {
  max-width: 1000px !important;
}
.gx-user-popover li:hover,
 .gx-user-popover li:focus {
    background-color: #d5d5d5;
}
.avtImgStyle{
    width: 35px;
    height: 35px;
}
.ant-input-disabled {
    background-color: #fff;
    opacity: 1;
    cursor: not-allowed;
    color: inherit;
}
.selected {
    background: #545454 !important;
    color:#fff !important;
}

.ant-select-dropdown-menu-item:hover {
     color:#fff ;
}
.ant-tabs-bar .ant-tabs-tab {
    text-align: right;
    font-weight: bold;
}

这是我要在页面中导入的样式页面。

所有<Input>标签的占位符都有效。

但不适用于<Select>。

此CSS是否阻止了占位符？如何使select的占位符可见？

Answer 1

您需要设置宽度才能看到它

<Select placeholder="Select A User Role" style={{ width: 200 }}>
  <Option value="2">Company Admin</Option>
  <Option value="3">Company User</Option>
</Select>

工作示例：https://codesandbox.io/s/4w8yxqm7w4

Answer 2

Select组件的默认类选择器是ant-select（而不是您提供的代码中的ant-select-dropdown）。使用正确的类名为组件设置宽度应该可以。

也如@baitun的评论中所述，您需要删除value属性以显示占位符。

Answer 3

如果我说得对，我不知道，但是我认为您必须像下面这样编码

<select>
    <!-- Use an option being selected and disabled default -->
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

以上代码可用于react，其余有关绑定数据和添加事件回调的问题。

antd中select标签的占位符属性不起作用

3 个答案: