时间戳

首页 > 解决方案 > CSS 样式不适用于 datetime-local 元素

html - CSS 样式不适用于 datetime-local 元素

问题描述

尝试覆盖datetime-local输入元素的默认宽度，但 CSS 更改未应用于该元素。

该datetime-local元素显示在位于其右侧的兄弟元素之上。

你如何设计datetime-local元素？

HTML：

<div class="row">
    <div class="form-group col-4">
        <label>System User Account </label>
        <div>
            <input 
                type="text" 
                class="form-control input-lg" 
                name="sysuseracct" 
                id="sysuseracct" 
                placeholder="Account with issue or request"
            >
        </div>
    </div>
    <div class="form-group col-4">
        <label>Date Issue Began</label>
        <div>
            <input 
                type="datetime-local" 
                id="dateissuebegan" 
                name="dateissuebegan" 
                style="height: 2.3rem; font-size: 1em;"
            >
        </div>
    </div>
    <div class="form-group col-4">
        <label>External Trouble Ticket</label>
        <div>
            <input 
                type="text" 
                class="form-control input-lg"
                name="externaltt" 
                id="externaltt" 
                style="padding: 1em;" 
                placeholder="If Applicable"
            >
        </div>
    </div>
</div>

CSS：

input { display: inline-block;}
    
#dateissuebegan {
    box-sizing: border-box;
    width: 50px;
}

标签： htmlcss

解决方案

检查此代码段。

您可以根据自己的喜好调整宽度。

input { display: inline-block;}

 input[type="datetime-local"] {
     width: 160px;
     /* More styles here */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <div class="row">

                    <div class="form-group col-4">
                        <label>System User Account </label>
                        <div>
                          <input type="text" class="form-control input-lg" name="sysuseracct" id="sysuseracct" placeholder="Account with issue or request">
                        </div>
                    </div>
                    
                    <div class="form-group col-4">
                        <label>Date Issue Began</label>
                        <div>
                          <!-- <input type="datetime-local" id="dateissuebegan" name="dateissuebegan" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"> -->
                          <input type="datetime-local" id="dateissuebegan" name="dateissuebegan" style="height: 2.3rem; font-size: 1em;">
                        </div>
                    </div>
                    <div class="form-group col-4">
                        <label>External Trouble Ticket</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="externaltt" id="externaltt" style="padding: 1em;" placeholder="If Applicable">
                        </div>
                    </div>
                  </div>

推荐阅读