Cercando di posizionare gli angoli arrotondati sui pulsanti usando JQuery Mobile e 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>

.

Ma non sto vedendo gli angoli rotondi .... Ho provato negli ultimi minuti ma non sto vedendo gli angoli rotondi.

Answer 1

JQuery Mobile avvolge effettivamente ingressi all'interno di un div con le classi del pulsante.È possibile aggiungere facilmente una classe al wrapper utilizzando un attributo dati sull'ingresso denominato DATA-Classe di wrapper .

Quindi crea una classe per gli angoli arrotondati:

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

.

Quindi assegnarlo all'attributo dati:

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

.

.

Ecco un funzionamento demo