从标签 ui 控件中删除边框答案

【问题标题】：Removing border from tab ui control从标签 ui 控件中删除边框
【发布时间】：2011-07-11 05:39:20
【问题描述】：

我有以下脚本：

但我似乎无法移除选项卡控件周围的浅灰色边框。这里有人知道怎么做吗？

我尝试了以下方法：

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

但这不起作用。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs jquery-ui-theme

【解决方案1】：

将一个简单的#tabs {border: none} 添加到您的列表中应该可以完成这项工作。

【讨论】：

【解决方案2】：

给按钮一个类，并从该类中删除边框..

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

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

...

.noBorder{border:none;}

【讨论】：

【解决方案3】：

假设我正确理解您的问题，您想删除文本周围的边框

Proin elit arcu, rutrum commodo, vehicula 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; }

将仅针对具有选项卡 id 和 .ui-widget-content 类的元素

更新jsfiddle。

【讨论】：

为什么会缩进按钮下方的文本？