试图使用jQuery Mobile和CSS3在按钮上放置圆角

Question

css3是

#hearitagain
{
    border-radius: 50% !important;
}

.

html5是

<div data-role="page" data-theme="a">

<p id="question"> The Terminator </p>

<label for="basic"> </label>
<input type="text" name="name" id="basic" value="">

    <div class="ui-grid-a">
    <div class="ui-block-a"> <input type="submit" class = "button" id ="checkanswer" value="Confirm"> </div>
    <div class="ui-block-b"> <input type="submit" class = "button" id ="hearitagain" value="Hear It Again"> </div>
    </div>

</div>

.

但我没有看到圆角......我一直在努力几分钟，但我没有看到圆角。

Answer 1

jQuery Mobile实际上包裹在div内的输入与按钮类。您可以使用名为 数据 - 包装级 。

所以为圆角创建一个类：

.rounded
{
    border-radius: 50% !important;
}

.

然后将其分配给Data属性：

<input type="submit" class = "button" id ="hearitagain" value="Hear It Again" data-wrapper-class="rounded">

.

这里是一个工作演示