有没有办法删除 safari 中的默认占位符文本？
问题描述 投票：0回答：1
我正在尝试创建一个带有日期和时间输入字段的表单。我有一个占位符文本，当用户单击该字段时，它会上升 X 像素。
表单在 Chrome 上看起来符合预期，但在 Safari 中，表单字段存在重叠。 我如何在 Safari 中修复它？
野生动物园
铬
HTML -
<div class="form-field col-sm-6">
<input id="date" name="birthdate" class="input-text js-input" type="date" placeholder="" required />
<label class="label" for="birthdate">Date of Birth</label>
</div>
<div class="form-field col-sm-6">
<input id="birthtime" name="birthtime" class="input-text js-input" type="time" placeholder="" required />
<label class="label" for="birthtime">Time of Birth</label>
</div>
CSS -
.contact-form .input-text:focus {
outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
.contact-form .label {
position: absolute;
left: 20px;
bottom: 11px;
font-size: 18px;
line-height: 26px;
font-weight: 400;
color: #b1afaf;
cursor: text;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
1个回答
0
投票
投票
我准备了如下代码。与 Bootstrap 5 兼容。如果你愿意，如果你的语言不是英语，你可以翻译关于日历的文本成你自己的语言。我在 mac 上的 safari 在线浏览器测试门户上尝试了此代码。他们工作正常。但它需要用移动设备的媒体查询进行编辑
$(function () {
$("#datepicker").datepicker();
});
$(".clockpicker").clockpicker();
$.fn.datepicker.dates["en"] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today",
clear: "Clear",
format: "mm/dd/yyyy",
titleFormat: "MM yyyy" /* Leverages same syntax as 'format' */,
weekStart: 0,
};body {
margin-top: 3em !important;
display: flex;
justify-content: center;
background-color: white;
}
span i.bi.bi-clock::before {
font-size: large;
margin-top: 10px !important;
margin-left: 5px !important;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: text-indent 0.5s 0.5s ease;
text-indent: -100%;
opacity: 1;
}
input[type="text"],
textarea {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
}
input[type="text"]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 2px solid rgb(5, 5, 5);
}
input[class="form-control"],
textarea {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
}
input[class="form-control"]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
}
input[class="form-control"] {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 2px solid rgb(5, 5, 5);
}
span.input-group-text.bg-light.d-block {
background-color: #fff !important;
border: none !important;
}
.input-group-append {
cursor: pointer;
}
i.fa.fa-calendar {
padding: 4px;
}
.datepicker td,
th {
text-align: center;
padding: 8px 12px;
font-size: 14px;
}
.datepicker {
top: 6em !important;
border: 1px solid black;
}<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Date-Time Picker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" integrity="sha512-BB0bszal4NXOgRP9MYCyVA0NNK2k1Rhr+8klY17rj4OhwTmqdPUQibKUDeHesYtXl7Ma2+tqC6c7FzYuHhw94g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha512-MT4B7BDQpIoW1D7HNPZNMhCD2G6CDXia4tjCdgqQLyq2a9uQnLPLgMNbdPY7g6di3hHjAI8NGVqhstenYrzY1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="container">
<div class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col">
<div class="input-group date" id="datepicker">
<input type="text" class="form-control" id="date" placeholder="Date Of Birth" />
<span class="input-group-append">
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
<label for="date" class="col-1 col-form-label">Time</label>
<div class="col">
<div class="input-group clockpicker" data-placement="bottom" data-align="bottom" data-autoclose="true">
<input type="text" class="form-control" placeholder="Time Of Birth" />
<span class="input-group-addon">
<i class="bi bi-clock"></i>
</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js" integrity="sha512-x0qixPCOQbS3xAQw8BL9qjhAh185N7JSw39hzE/ff71BXg7P1fkynTqcLYMlNmwRDtgdoYgURIvos+NJ6g0rNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js" integrity="sha512-1QoWYDbO//G0JPa2VnQ3WrXtcgOGGCtdpt5y9riMW4NCCRBKQ4bs/XSKJAUSLIIcHmvUdKCXmQGxh37CQ8rtZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="date-picker.js"></script>
</body>
</html>1920x1080 分辨率 Safari 浏览器
1680x1050 分辨率 Safari 浏览器
最新问题
- CallerMemberName 在内部如何工作？
- 让加密将域添加到现有证书[关闭]
- 具有跨项目 Cloud Run 服务的 GCP 负载均衡器
- 如何扩展 TypeORM QueryBuilder
- 如何满足 stylelint“上下文”检查，而不导致 gulp 错误？
- 合并返回温度
- Jetpack Compose 框架 - Android - Kotlin - 在文本字段中，为什么在我的挂起协程完成后“查询”值没有更改？
- 如何检测给定的Python模块是否是用mypyc编译的？
- 导致 gcloud 函数部署失败且没有错误消息的原因（OperationError：code=13，message=None）
- Java Swing 面板布局
- 如何在 VS Code 编辑器中获取文本的十六进制颜色值？
- 从多个字符串创建地址并用逗号分隔
- Azure Bicep - 引用无法在开始时计算的变量
- 修复“尝试读取 null 上的属性“nodeValue””
- 整个框架核心复杂类型作为主键
- 如何对 CSV 文件的内容迭代运行 Python 脚本 [已关闭]
- 在Word中将形状/内联形状设置为装饰
- 将字符串列表连接成短语，最后一个字符串之前没有逗号，最后一个字符串之前有“and”/“or”
- iOS 按钮图像位置与 Android 类似
- 2024 年 9 月 29 日之后，Spring Boot 应用程序的 Maven 构建失败并出现编译错误
© www.soinside.com 2019 - 2024. All rights reserved.