|
|
相关文章推荐
|
酒量大的足球 · python代码转java工具-掘金· 1 年前 · |
|
|
没有腹肌的松鼠 · oracle blob md5sum-掘金· 1 年前 · |
|
|
千年单身的马铃薯 · Oracle函数REGEXP_SUBSTR结 ...· 1 年前 · |
进行日期时间本地css更改
问
进行日期时间本地css更改
EN
EN
Stack Overflow用户
提问于
2022-03-21 10:34:21
回答 2
查看 877
关注 0
票数 0
日期时间的CSS更改-本地输入标记：
我想让这个日历的东西在右边，如图2所示，请帮助我解决这个问题。
下面是输入标记的代码，输入标记类型为"datetype-local“。
代码语言：
javascript
复制
<h1>Show a Date and Time Control</h1>
<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit">
</form>谢谢
在单击日历图像之前
点击日历图像后
EN
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-21 11:22:15
<input type="date" />
元素已经有了一个装饰，但是它不同于浏览器和操作系统。如果您希望您的UI在所有系统上保持一致，您将需要创建一个自定义包装元素(如下面所示)。
您可以通过将
<input>
包装在
<div>
中并为包装器添加
::after
样式来添加输入装饰。本机
<input>
元素不支持
::before
和
::after
，因为它不是容器元素。
代码语言：
javascript
复制
const handleClickIcon = (e) => {
if (e.target.classList.contains('datetime-wrapper')) {
console.log('Toggle calendar!');
document.querySelector('.datetime-wrapper')
.addEventListener('click', handleClickIcon);
代码语言：
javascript
复制
.as-console-wrapper { max-height: 4em !important; }
.datetime-wrapper {
position: relative;
padding: 0;
margin: 0;
width: max-content;
.datetime-wrapper input {
padding: 0.5rem;
border: thin solid grey;
border-radius: 0.25rem;
/* adornment */
.datetime-wrapper::after {
/* .fa-solid */
font-family: "Font Awesome 6 Free";
font-weight: 900;
/* .fa-calendar-days:before */
content: "\f073";
/* custom */
position: absolute;
top: 0;
right: 0.5rem;
height: 2rem;
line-height: 2rem;
cursor: pointer;
}
代码语言：
javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/solid.min.css" rel="stylesheet"/>