удалить границу из текстового ввода

Question

Я дословно следовал инструкциям, используя рамку: нет и фон: прозрачный, но рамка все еще отображается в моих текстовых областях.Я использую фоновое изображение для настройки внешнего вида, но не могу удалить границу.

рассматриваемый веб-сайт http://www.officeyoganyc.com/

разметка

  <div class="fieldHolder">
  <div class="attributeinput1"><input type=text name=email value="email" size="16"> 
  <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div> 
  </div>

css

  .fieldHolder
{
    width: 137x;
    height: 24px;
    background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
    margin-left: 209px;
        margin-top: 162px;
}



  .attributeinput1
{

    border: none;
    color: #000000;
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    height: 22px;
    margin-left: 5px;
    margin-top: 5px;
    width: 170px;

}

Answer 1

Этот селектор:

.attributeinput1 {

Только стили <div>. Вы хотите <input /> внутри <div>:

.attributeinput1 input {

---

Кстати, тег input самозакрывающийся:

<input ... />

Ваш сайт в IE может выглядеть неестественно, если вы пропустите />, так как он может рассматриваться как начало элемента блока.

---

Кроме того, еще одна вещь (просто нюанс в HTML) - атрибут language= в теге <script> устарел (т.е. не поддерживается и старый). Вы можете смело пропустить:

language="Javascript"

в ваших <script> тегах.

---

Если вы используете Google Chrome или Firefox, есть действительно полезный инструмент, который вы можете использовать. В Firefox это называется Firebug . В Google Chrome это называется что-то вроде Inspector .

Они оба позволяют вам «проверять» макет веб-страницы и видеть, какие свойства CSS влияют на какие элементы.

Вот что я имею в виду. Посмотрите на правую сторону:

Я использовал это, чтобы подтвердить, что ваш CSS не был применен должным образом. Чтобы активировать его, щелкните правой кнопкой мыши любую часть веб-страницы и нажмите « Inspect ».

Надеюсь, это поможет!

Answer 2

У вас слишком много атрибутов для определения фона и границ.

Это должно работать.

.attributeinput1 input { граница: 0; фон: нет; }

Если нет, то попробуйте

.attributeinput1 input { границы: 0 важно; ! Фона: нет важно; }