Удаление границы из вкладки пользовательского интерфейса

Question

У меня есть следующий скрипт:

http://jsfiddle.net/2HNvL/

но я не могу удалить светло-серую рамку вокруг вкладки. Кто-нибудь здесь знает, как это сделать?

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

    #tabs .ui-widget { border:none;  padding:0px; margin:0px; }
    #tabs .ui-widget-header { border:none; display:none; padding:0px; margin:0px; }
    #tabs .ui-widget-content { border:none; padding:0px; margin:0px; }

Но это не работает.

Answer 1

Добавление в ваш список простого #tabs {border: none} должен сделать работу.

Answer 2

Если я правильно понимаю ваш вопрос, вы хотите убрать границу вокруг текста

Proin Elit Arcu, Rutrum Commodo, Vehicleula Tempus, Commodo,

Если это так, ваш единственный селектор не подходит для .ui-widget-content

 #tabs .ui-widget-content { border:none; padding:0px; margin:0px; }

Ищет дочерний элемент .ui-widget-content с родителем #tabs

Если вы измените это на это:

#tabs.ui-widget-content { border:none; padding:0px; margin:0px; }

Будет нацелен только на элемент с идентификатором вкладок и классом .ui-widget-content

Обновлен jsfiddle.

Answer 3

Назначьте кнопкам класс и удалите границу из этого класса.

http://jsfiddle.net/2HNvL/3/

<input type="button" value="button1" id="button1" class='noBorder' />

...

.noBorder{border:none;}