Javascript 我无法通过转换标签在输入框中创建转换

输入框已经在使用焦点，输入和标签标签没有使用前面样式标签中提供的css样式？ 变换不工作：（ 我有大胆的地方，我没有得到， 我已经提供了我的css和html 我使用了输入和标签>，然后在css中设置它们的样式，但它不起作用，然后我创建了转换，在页面中将其作为默认设置后，它就不再起作用了

我尝试过的代码：

.main{
显示器：flex；
弯曲方向：立柱；
高度：400px；
宽度：200px；
保证金：自动；
边框：2件纯黑；
对齐项目：居中；
证明内容：中心；
}
.searchdiv{
位置：相对位置；
宽度：100%；
/*边框：2倍纯红*/
}
.搜索{
宽度：100%；
边界：0px；
边界底部：rgba（22,22,22,0.349）；
背景：rgba（211210210,0.705）；
}
标签{
位置：绝对位置；
最高：0%；
左：0%；
过渡：0.3s；
}
.搜索：聚焦，
.搜索：有效{
大纲：无；
背景色：rgba（85206247,0.699）；
}
#搜索栏：焦点~标签，
#搜索栏：有效~标签{
转换：translatey（-10px）；
}

搜寻
搜寻

更好的做法是不要在输入中添加标签，也不要在css中添加标签，尝试使其更具体，如：

.main . searchdiv input /* for example */

---

除此之外，如果您使用更干净的代码和更好的代码重新发布，我真的帮不上忙。据我所知，转换是有效的。如果您认为这是您的浏览器设置，请尝试添加类似以下内容的reset.css：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

---

我希望我正确地理解了你想做什么

选项1-CSS

所做的更改位于

.search:focus

和

#searchbar:focus+label

但在输入字段失焦后，“搜索”字样将返回其原始位置

如果希望更改一次，请查看下面的选项2

.main{
显示器：flex；
弯曲方向：立柱；
高度：400px；
宽度：200px；
保证金：自动；
边框：2件纯黑；
对齐项目：居中；
证明内容：中心；
}
.searchdiv{
位置：相对位置；
宽度：100%；
/*边框：2倍纯红*/
}
.搜索{
宽度：100%；
边界：0px；
边界底部：rgba（22,22,22,0.349）；
背景：rgba（211210210,0.705）；
}
标签{
位置：绝对位置；
最高：0%；
左：0%；
过渡：0.3s；
}
.搜索：焦点{
大纲：无；
背景色：rgba（85206247,0.699）；
}
#搜索栏：焦点+标签{
转换：translatey（-20px）；
}

搜寻
搜寻

#searchbar:valid+label，当我使用它时，焦点是将标签保持在转换后它不工作的位置。：（我用JS添加了一个说明和选项2。