Как изменить размер ввода в семантическом интерфейсе? - PullRequest
Новая
       19

Как изменить размер ввода в семантическом интерфейсе?

0 голосов
/ 12 ноября 2018

Я хочу настроить ширину и высоту поля ввода в пользовательском интерфейсе, но это не работает, почему так?

код:

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;
}

Ничего из вышеперечисленного не работает, почему так?

Смотрите скриншот ниже: enter image description here

1 Ответ

0 голосов
/ 12 ноября 2018

После проверки кода пользовательский интерфейс добавляет некоторые стили к входам с помощью этого селектора .ui.form input[type='text'], поэтому используйте тот же селектор для переопределения стилей.Или даже более конкретно: form.ui.form input[type='text'].

В большинстве случаев проблемы такого рода связаны со спецификой селектора css.

В ваших примерах все хорошо, кроме .ui.input, который ничего не выбирает..ui - это класс формы, .input не существует.Я предлагаю вам посмотреть селекторы CSS.Например, здесь -> CSS-селекторы

Проверьте фрагмент кода ниже или fiddle -> 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>

PS в будущем создайте работающий фрагмент кода SO (<> incon на панели инструментов) вместо просто вставки некоторого кода.Несмотря на то, что это JSX, его легко конвертировать в HTML.

...