Trying to place rounded corners on buttons using jQuery Mobile and CSS3
-
02-01-2020 - |
Question
CSS3 is
#hearitagain
{
border-radius: 50% !important;
}
HTML5 is
<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>
But I am not seeing the round corners.... I have been trying for the past several minutes but I am not seeing the round corners.
Solution
jQuery Mobile actually wraps inputs inside a DIV with the button classes. You can easily add a class to the wrapper using a data attribute on the input called data-wrapper-class.
So create a class for the rounded corners:
.rounded
{
border-radius: 50% !important;
}
Then assign it to the data attribute:
<input type="submit" class = "button" id ="hearitagain" value="Hear It Again" data-wrapper-class="rounded">
Here is a working DEMO
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow