gpt4 book ai didi

html - 如何使月份输入框的内容居中?

转载 作者:太空宇宙 更新时间:2023-11-04 14:50:23 24 4
gpt4 key购买 nike

我无法将 HTML 月份输入字段中的文本居中。这是我的 HTML/CSS 的简化版本,用于演示该问题:

如果你运行它,你会发现它没有居中 - 如果你尝试“text-align: right”,它也不会一直向右移动。它确实与两种选择一起移动,这很奇怪。

知道为什么会这样吗?

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>

<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">

</body>
</html>

在我看来是这样的:如您所见,文本没有在输入框内居中。

enter image description here

最佳答案

由于 input type="month" 的呈现方式,这没有按预期工作。

如果删除禁用属性,您将看到(取决于浏览器)右侧有一些箭头和插入符号。考虑到他们,您的文字处于死 Angular 。

enter image description here

你需要添加这个CSS

input[type=month]::-webkit-calendar-picker-indicator, 
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}

等等

enter image description here

编辑:

您可以使用 :disabled CSS 选择器,这样它就不会影响您的其他输入

input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}

关于html - 如何使月份输入框的内容居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54024542/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com