У меня возникли сложности с текстовым полем MDL. По какой-то причине синяя полоса, которая появляется в нижней части текстового поля, когда вы нажимаете на нее, появляется в середине, почти как если бы она ударила по тексту.
Почему это происходит и как я могу это исправить ?
(я пытался максимально сократить свой код при сохранении ссылок MDL)
JS Fiddle: https://jsfiddle.net/51acqdzn/# & Togetherjs = uaj4vhp6QI
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<div class="runningtotal">
Running CPC Total (in £):
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" readonly="true" pattern="-?[0-9]*(\.[0-9]+)?" id="sum" value="0.00" data-total="0">
</div>
Total Cost (in £):
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" readonly="true" pattern="-?[0-9]*(\.[0-9]+)?" id="totalcost" value="0 (until clicks specified)" data-total="0">
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="sales_order_form_button">
Create Sales Order Form
</button>
</div>
<div class='parent flex-parent'>
<div class="selecttier flex-child">
<h1>Number of Clicks:</h1>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="numberofclickstextbox" value="0" data-total="0">
<label class="mdl-textfield__label" for="numberofclickstextbox">Number...</label>
<span class="mdl-textfield__error">Please enter a number.</span>
</div>
<!-- <input id="numberofclickstextbox" name="numberofclicks" type="text" value="0" data-total="0"/> -->
</div>
<div class="bottomspace"></div>
<br>
<br>
</body>
CSS:
.flex-parent {
display: flex;
flex-wrap: nowrap;
}
.flex-child {
flex: 1 0 0px;
}
.selecttier.flex-child {
background-color: #f0f7fb;
background-position: 9px 0px;
background-repeat: no-repeat;
border-left: solid 4px #3F51B5;
border-bottom: solid 4px #3F51B5;
line-height: 18px;
overflow: hidden;
}