問(wèn)題描述

錯(cuò)誤代碼：

input { padding: 4px 0; // https://css-tricks.com/almanac/selectors/p/placeholder-shown/ &:focus:not(:placeholder-shown) + .input__clear, &.input--filled:focus + .input__clear { opacity: 1; }}

正確代碼：

input { padding: 4px 0; // https://css-tricks.com/almanac/selectors/p/placeholder-shown/ &:focus:not(:placeholder-shown) + .input__clear { opacity: 1; } /* !!! 不能和上面的合并成一行，會(huì)導(dǎo)致下面的選擇器無(wú)法匹配 */ &.input--filled:focus + .input__clear { opacity: 1; }}

demo 見(jiàn)https://jsfiddle.net/mLz7rajf/3/https://jsfiddle.net/mLz7rajf/5/正確情況應(yīng)該是在不支持:placeholder-shown的瀏覽器(比如Firefox, 或者將placeholder-shown，隨便改成一個(gè)無(wú)法識(shí)別的偽類)，輸入內(nèi)容后顯示 Clear

問(wèn)題解答

貌似是瀏覽器bug