Seeking guidance as a newcomer to html and css. Looking to create a signup form using html and css, but encountering issues with the radio button not displaying in the browser. Unsure of the root cause of the problem. Any assistance would be greatly appreciated. Here is an excerpt from my html file,
<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
<title>Create an Account</title>
</head>
<body>
<div class="bar bar-header">
<h1 class="title">Create an Account</h1>
<a href="login.html" class="button button-clear button-royal">Login</a>
</div>
<div class="padding" style="margin-top:75px;">
<label class="item-input">
<span class="input-label">Full Name</span>
<input type="text" placeholder="" id="fullname">
</label>
<label class="item-input">
<span class="input-label">Username</span>
<input type="text" placeholder="" id="username">
</label>
<label class="item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="" id="email">
</label>
<label class="item-input">
<span class="input-label">Password</span>
<input type="password" placeholder="" id="password">
</label>
<label class="item-input">
<span class="input-label">Contact</span>
<input type="number" placeholder="" id="contact">
</label>
<label class="item-input">
<span class="input-label">Gender</span>
<p>
<input name="gender" type="radio" id="male" value="male" />
<label for="male">Male</label>
<input name="gender" type="radio" id="female" value="female" />
<label for="female">Female</label>
</p>
</label>
<label class="item-input">
<button class="button button-block button-positive" id="signup">Create an Account</button>
</label>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/auth.js"></script>
</body>
</html>
The css file being utilized is ionic.min.css. Below is the portion of the css file pertaining to the radio button styling.
.item-input input {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-flex: 1;
...
...
...
.platform-android.grade-b .item-radio,
.platform-android.grade-c .item-radio {
-webkit-animation: androidCheckedbugfix infinite 1s
}