样式单<a> to match grouped-input (controlgroup)</a>

Question

使用j Query Mobile：我有一个控制组，并为它做了一些CSS样式。我创建了另一个控制组，需要样式匹配第一个（控制组）。对照组中的元素是不同的。

我需要帮助为两个控制组创建相同的样式。

1。第一个控制组

CSS：

.ui-controlgroup-controls {
    width: 100%;
    margin-bottom: 42px;
}
.ui-controlgroup-controls .ui-select {
    position: absolute;
    left: 15px;
    right: 73px;
}
.ui-controlgroup-controls a.ui-btn {
    position: absolute;
    right: 15px;
    left: auto;
}

HTML：

<div data-role="controlgroup" data-type="horizontal">
  <select name="select-choice-1" id="select-choice-1">
    <option value="Select Category">Select Category</option>
  </select>
  <a href="" id="iconshow" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
</div>

2。第二个控制组

我需要与上面相同的样式

HTML：

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" data-role="button">Select Location</a>
  <a href="" id="mailLocationDetails" data-role="button" data-icon="plus" data-iconpos="notext" style = "display:none">Add</a>
</div>

Answer 1

描述：将示例中的类ui-btn2和ui-btn3添加到第一个<a data-role="button"。 ui-btn2调整宽度，而ui-btn3调整右边框半径。这两个类可以组合在一起，但是对于这个例子，它们是分开的。

请在此处查看： FIDDLE

HTML：

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" data-role="button" class="ui-btn2 ui-btn3">Select Location</a>
  <a href="" id="mailLocationDetails" data-role="button" data-icon="plus" data-iconpos="notext" style="display:none">Add</a>
</div>

CSS：

/* width */
.ui-controlgroup-controls a.ui-btn2 {
    left: 15px;
}
/* right radius */
.ui-controlgroup-controls a.ui-btn3 {
    border-right-width: 1px;
    border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
}  

Answer 2

为两个控制组提供一个公共类并给出样式。

<div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup-controls">


.ui-controlgroup-controls
{
    // Style for control-group with class abc goes here
}