Tratando de colocar esquinas redondeadas en botones usando JQuery Mobile y CSS3
-
02-01-2020 - |
Pregunta
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.
Solución
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
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow