I'm having trouble getting the .ui-input-text class to apply to the input field, despite using the jQuery Mobile class for text inputs. The border radius is not changing unless I manually add it in with CSS code. Here's my current setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login Page</title>
<style type="text/css">
@font-face {
font-family: 'RNS Camelia';
font-style: normal;
font-weight: normal;
src: local('RNS Camelia'), url(http://localhost/codeigniter/fonts/RNS_Camelia.otf);
}
.ui-btn {
width: 40% !important;
height: 15px !important;
border-radius: 50px !important;
text-align: center !important;
background-color: #D6DE23 !important;
font-family: 'RNS Camelia', serif !important;
}
.login_button {
margin-left: 20px !important;
text-align: center !important;
}
.ui-page {
background-image: url('../codeigniter/images/background.jpg') !important;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.ui-input-text {
border-radius: 50px !important;
}
.user_pass {
text-align: center!important;
color: white!important;
font-family: 'RNS Camelia', serif!important;
font-size: 16px!important;
height: 20px!important;
}
.text_input_wrap {
margin-right: 15px !important;
}
.bottom_links {
color: white!important;
font-family: 'RNS Camelia', serif!important;
text-decoration: none !important;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div class="ui-content" data-role="main">
<img border="0" src="<?php echo $this->config-"base_url();?" images/logo_only.png" alt="Logo Bar Express" style="margin:0px;width:313px;display:inline;height:142px;float:left;" />
<div style="clear:both;"></div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="user_pass">Enter Username</div>
</div>
<div class="ui-block-b">
<div class="user_pass">Enter Password</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="text_input_wrap">
<input type="text" id="username" name="username">
</div>
</div>
<div class="ui-block-b"> </div>
</div>
<input type="password" id="password" name="password">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="login_button">
<input type="submit" value="LOG IN">
</div>
</div>
</div>
</div>
</div>
</body>
</html>