Html 垂直表单字段行为怪异

我使用带有以下代码的联系人表单7创建了一个垂直表单：

input[type=“phone”]：-webkit输入占位符{
-webkit过渡：不透明度0.3s线性；
颜色：黑色；
}
输入[type=“phone”]：焦点：--webkit输入占位符{
不透明度：0；
}
}
输入[type=“text”]：-webkit输入占位符{
-webkit过渡：不透明度0.3s线性；
颜色：黑色；
}
输入[type=“text”]：焦点：：-webkit输入占位符{
不透明度：0；
}
.wpcf7-form-control.wpcf7-submit{
宽度：40%！重要；
文本对齐：居中！重要；
背景色：#ff6600！重要；
颜色：#0E1428！重要；
字体系列：OpenSansHebrew浓缩版；
字体大小：20px；
字体风格：正常！重要；
字号：900；
边界：0；
边界半径：100em；
显示：内联块；
左：自动；
右：自动；
溢出：隐藏；
最小宽度：250px；
}
@关键帧反弹{
0%,
20%,
60%,
100% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
40% {
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
}
80% {
-webkit转换：translateY（-10px）；
转换：translateY（-10px）；
}
}
输入[type=“submit”]：悬停{
宽度：40%！重要；
文本对齐：居中！重要；
字母间距：4px；
背景色：#0E1428！重要；
颜色：#ff6600！重要；
字体系列：OpenSansHebrew浓缩版；
字体大小：20px；
字体风格：正常！重要；
字号：900；
动画：反弹1秒；
边界：0；
边界半径：100em；
显示：内联块；
左：自动；
右：自动；
溢出：隐藏；
最小宽度：250px；
}
body.cf7样式输入[type=“text”]：焦点，
body.cf7样式输入[type=“email”]：焦点，
body.cf7样式文本区域：焦点{
过渡：不透明度0.5s 0.5s轻松！重要；
不透明度：0！重要；
}
[占位符]：焦点：：-webkit输入占位符{
过渡：不透明度0.5s 0.5s；
不透明度：0；
}
[占位符]{
宽度：25%！重要；
背景色：rgba（255，255，255，0.8）！重要；
高度：40px！重要；
颜色：黑色！重要；
保证金：0自动；
文本对齐：居中！重要；
边界半径：10px！重要；
显示：内联块；
左：自动；
右：自动；
字体系列：OpenSansHebrew浓缩版！重要；
字体：斜体；
边框：2px实心#0E1428！重要；
最小宽度：164px；
}
[占位符]：焦点{
背景色：rgba（2212212212210.8）！重要；
过渡：不透明度0.5s 0.5s轻松！重要；
字体系列：OpenSansHebrew浓缩版！重要；
字体风格：斜体！重要；
边框：2个实心#ff6600！重要；
盒影：0 0 10px#719ECE！重要；
最小宽度：164px；
}

我检查了给定的链接，似乎您的输入都使用了不同的样式

首先，在HTML中，左侧输入有
type=“text”
，右侧输入有
type=“phone”
。不确定这是否正确

如果这是正确的，那么你可以tweek你的CSS。似乎很少有样式不适用于
type=“phone”
的输入，由于样式的差异，右边的样式看起来不同

form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"], form input[type="date"], form input[type="month"], form input[type="time"], form input[type="datetime"], form input[type="datetime-local"], form input[type="week"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="color"], form select, form textarea {
 ....
}

在上面的CSS中，如果您添加
表单输入[type=“phone”]
，则第二个表单也应正确运行

或

在HTML中，将第二个输入更改为
type=“tel”
以修复（本例中没有CSS更改）

无法复制该问题。您在哪个浏览器上看到此行为？嘿，谢谢您的帮助。Chrome，这里有一个临时链接：左边的是“name”，右边的是“phone”，因此左边的有输入：type=“text”。右边有输入：type=“phone”。左边是
type=“text”
，很少有样式只应用于text，而不是
type=“phone”
。只需将
表单输入[type=“phone”]
添加到上面显示的CSSI已编辑答案，您还可以将第二个输入更改为
type=“tel”
以修复，而无需任何CSS更改
<input type="tel" textarea name="your-phone" input placeholder="טלפון" id:phone required</input>