32.带前缀的输入框 & 带图像剪切的卡片

文章预览

带前缀的输入框  创建一个带有可视化、不可编辑前缀的输入框。 使用 display: flex 创建一个容器元素。 移除 字段的边框和轮廓。将它们应用于父元素,使其看起来像一个输入框。 使用 :focus-within 伪类选择器来相应地设置父元素的样式,当用户与 字段交互时。 < div   class = "input-box" >    < span   class = "prefix" > +86 span >    < input   type = "tel"   placeholder = "139 1234 5678" /> div > .input-box  {    display : flex;    align-items : center;    max-width :  300px ;    background :  #fff ;    border :  1px  solid  #a0a0a0 ;    border-radius :  4px ;    padding-left :  0.5rem ;    overflow : hidden;    font-family : sans-serif; } .input-box   .prefix  {    font-weight :  300 ;    font-size :  14px ;    color :  #999 ; } .input-box   input  {    flex-grow :  1 ;    font-size :  14px ;    background :  #fff ;    border : none; ………………………………