Question

我想在实际的ui中调整输入框的宽度和高度，但是为什么不起作用？

代码：

index.html：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

login.js：

export default class Login extends Component {
  render() {
    return (
      <div>
        <h5>Please login below</h5>
        <form className="ui form">
            <div className="field">
                <label>URN Number</label>
                <input className="fname" type="text" name="number" placeholder="Enter URN number"/>
            </div>
            <div className="field">
                <label>Password</label>
                <input className="pwd" type="text" name="password" placeholder="Enter Password"/>
            </div>
            <button className="ui button" type="submit">Submit</button>
        </form>
      </div>
    )
  }
}

我想减小输入框的尺寸怎么办？

我尝试过的事情：

1）

form .fname {
        width: 60px;
    }

2）

.ui.input {
    width: 200px;
    height: 40px;
}

3）

.fname {
width: 50px;
}

以上方法均无效吗？

请参见以下屏幕截图：

Answer 1

在检查了代码之后，UI使用此选择器.ui.form input[type='text']向输入中添加了一些样式，因此请使用相同的选择器来覆盖样式。甚至更具体：form.ui.form input[type='text']。

在大多数情况下，此类问题与css选择器的特殊性有关。

在您的示例中，除.ui.input以外，其他所有选项都没有问题，其他都很好。 .ui是表单的类，.input不存在。我建议您查找CSS选择器。例如此处-> CSS selectors

在下面或小提琴中查看代码段-> jsFiddle

form.ui.form  input[type='text'] {
  width:150px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

<div>
  <h5>Please login below</h5>
  <form class="ui form">
    <div class="field">
      <label>URN Number</label>
      <input class="fname" type="text" name="number" placeholder="Enter URN number" />
    </div>
    <div class="field">
      <label>Password</label>
      <input class="pwd" type="text" name="password" placeholder="Enter Password" />
    </div>
    <button class="ui button" type="submit">Submit</button>
  </form>
</div>

P.S。将来，请创建一个有效的SO代码段（工具栏中的<> incon），而不仅仅是粘贴一些代码。事件是JSX，但很容易将其转换为HTML。

如何在语义ui中更改输入大小？

1 个答案: