Essayer de placer les angles arrondis sur des boutons à l'aide de JQuery Mobile et CSS3

Question

CSS3 est

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

html5 est

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

Mais je ne vois pas les coins rounds .... J'ai essayé depuis plusieurs minutes, mais je ne vois pas les coins ronds.

Answer 1

JQuery Mobile enveloppe en réalité les entrées à l'intérieur d'une div avec les classes de boutons.Vous pouvez facilement ajouter une classe à l'enveloppe à l'aide d'un attribut de données sur l'entrée appelée Classe d'emballage .

Créez donc une classe pour les coins arrondis:

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

Attribuez ensuite à l'attribut Data:

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

Voici un démo