Tratando de colocar esquinas redondeadas en botones usando JQuery Mobile y CSS3

Question

css3 es

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

html5 es

<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>

Pero no estoy viendo las esquinas redondas ... He estado intentando durante los últimos minutos, pero no estoy viendo las esquinas redondas.

Answer 1

JQUERY MOBILE En realidad, envuelve entradas dentro de un div con las clases de botones.Puede agregar fácilmente una clase a la envoltura utilizando un atributo de datos en la entrada llamada datos-clase de envoltura .

Así que cree una clase para las esquinas redondeadas:

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

luego asignelo al atributo de datos:

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

aquí es un trabajo demo