生年月日は以下の入力タイプがあります。クリックするとコントロールのサイズが変更されます
<div class="input-div spanicon">
<input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB">
<i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i>
</div>
ここでは同じもののfiddleです。
アイコンをクリックすると、フィールドのサイズが変更されます。
これはtype=dateからtype=textの変化が起こると、別のスタイルを適用する入力に
// Event to trigger the calendar in the signup page
$("#triggerCal").click(function() {
$("#txtDOB").attr("type", "date");
$("#txtDOB").focus();
$("#txtDOB").click();
});
// Focus out event of the textbox
$("body").on("focusout", "#txtDOB", function() {
$("#txtDOB").attr("type", "text");
});body.signup-page .login-form form input {
padding: 0 20px;
}
style.css:841 .input-div.spanicon input {
float: left;
position: relative;
width: 85%;
}
style.css:275 .login-form form input {
background-color: #ebf7fa;
border: 0px;
font-size: 14px;
color: #000;
outline: none;
border-radius: 5px;
height: 40px;
line-height: 15px;
margin-bottom: 10px;
padding: 0 5px 0 45px;
width: 100%;
display: block;
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28);
-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28);
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28);
}
.textbox-n{
width:180px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="input-div spanicon">
<input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB">
<i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>これはすべてのデバイスに対応しますか？また何らかの理由で、それはすべて一緒に異なるスタイルを取得します。 –
応答性のためには、@mediaクエリを使用する必要があります。次に、異なるビューポートでさまざまなサイズを変更できます – Sankar
を静的な幅を与えます。これは単純なトリックです。
<div class="input-div spanicon">
<input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB" onfocus="(this.type='date')">
<i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>あなたはinput textすなわち同じdate inputのサイズを維持する必要がある場合のonclick、あなたは `MAX-を割り当てることができ
// Event to trigger the calendar in the signup page
$("#triggerCal").click(function(){
var itp = $(".textbox-n").width();
var dt = $("#txtDOB").attr("type","date");
$(dt).focus();
$(dt).click();
$(dt).css({
width : itp
});
});
// Focus out event of the textbox
$("body").on("focusout","#txtDOB",function(){
$("#txtDOB").attr("type","text");
});body.signup-page .login-form form input {
padding: 0 20px;
}
style.css:841
.input-div.spanicon input {
float: left;
position: relative;
width: 85%;
}
style.css:275
.login-form form input {
background-color: #ebf7fa;
border: 0px;
font-size: 14px;
color: #000;
outline: none;
border-radius: 5px;
height: 40px;
line-height: 15px;
margin-bottom: 10px;
padding: 0 5px 0 45px;
width: 100%;
display: block;
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28);
-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28);
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50,0.28);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-div spanicon">
<input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB">
<i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>
、以下のようにしてみてくださいwidth：120px; ' –
ここでfiddleを更新しました：https：// j sfiddle.net/anupam_001/cndb49eh/4/ –