CSS не применяется к элементу ввода

0

Это странно, я не вижу проблемы, и у меня есть опыт использования CSS.

input {
  border: solid 1px #0066FF;
}
.docDataEditorRow input {
  width: 100px;
  font-size: 10px;
}

HTML:

<div id="docDataEditor">
    <form>
        <div class="column-50">
        <div class="docDataEditorRow">
            <label for="keyword-Fecha">Fecha</label>
            <input type="text" value="20131122" id="keyword-Fecha">
        </div>
        <div class="docDataEditorRow">
            <label for="keyword-Fecha de Creacion">Fecha de Creacion</label>
            <input type="text" value="2013-11-22 00:00:00" id="keyword-Fecha de Creacion">
        </div>      
        </div>
 <div class="column-50"></div>
    </form>
  </div>

Но применяется только первый класс input.

Проблема:

.docDataEditorRow input {
  width: 100px;
  font-size: 10px;
}

Не используется или отображается в Firebug как переопределенный

  • 0
    Он работает правильно: jsfiddle.net/n4R3Z
  • 0
    Подскажите пожалуйста что не так? jsfiddle.net/bb44J
Показать ещё 5 комментариев
Теги:

3 ответа

0
Лучший ответ

Обновить

Посмотрев на Fiddle, в CSS появился недопустимый символ. Это заставляло его сломаться и не применяться, а стили после этого персонажа.

После удаления стили применяются правильно

скрипка

оригинальный ответ

Самый простой способ разрешить это - использовать имя класса вместо элемента (input).

<input class="bacon" type="text" value="20131122" id="keyword-Fecha">

.bacon {
  width: 100px;
  font-size: 10px;
}

Использование .docDataEditorRow input может быть опасным, поскольку вы начинаете делать свой CSS конкретным. Сохранение вещей в одно имя класса сделает ваш css гораздо более удобным в обслуживании в долгосрочной перспективе.

Поделиться
  • 0
    Сначала проверьте в ваших инструментах разработки, правильно ли существуют стили CSS в таблице стилей. Затем используйте инструменты разработчика, чтобы увидеть, какие другие стили применяются к этому элементу.
  • 0
    Я добавил это, и странным образом это тоже не работает. Я полностью потерян. .editorInput {width: 100px; размер шрифта: 10 пикселей; }
Показать ещё 6 комментариев
0

У вас может быть что-то переопределяющее. Правило отображается в инспекторе элементов?

Я бы попробовал следующее:

#docDataEditor .docDataEditorRow input[type="text] {
  width: 100px;
  font-size: 10px;
}
Поделиться
  • 0
    Все еще не работает, контент для стилизации находится внутри div, который автоматически генерируется JQuery, если это помогает. Это так странно
  • 0
    А что вы видите в элементе инспектора?
Показать ещё 1 комментарий
0

Посмотрите на следующую скрипту: http://jsfiddle.net/AJSkh/

Ваш код точно так же, как вы вставили его в свой вопрос, и он работает как ожидается...

возможно, у вас есть что-то еще в коде, что заставляет его не работать.

input {
  border: solid 1px #0066FF;
}
.docDataEditorRow input {
  width: 100px;
  font-size: 10px;
}

<div id="docDataEditor">
    <form>
        <div class="column-50">
        <div class="docDataEditorRow">
            <label for="keyword-Fecha">Fecha</label>
            <input type="text" value="20131122" id="keyword-Fecha">
        </div>
        <div class="docDataEditorRow">
            <label for="keyword-Fecha de Creacion">Fecha de Creacion</label>
            <input type="text" value="2013-11-22 00:00:00" id="keyword-Fecha de Creacion">
        </div>      
        </div>
 <div class="column-50"></div>
    </form>
  </div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню