移动端常见的文本框输入样式

来源：互联网发布：希望有鬼知乎编辑：程序博客网时间：2024/06/05 14:51

HTML

<div class="WxBookContent">  <div class="FormItemEdit">      <input type="text" class="TextBox" placeholder="请输入书名">      <a href="javascript:void(0)" class="BtnClear"></a>    </div>

CSS

.WxBookContent{padding-top: 16px;}.WxBookContent .FormItemEdit {background: #ffffff;padding: 0px 26px;margin-bottom: 10px;position: relative;} .WxBookContent .FormItemEdit:before {content: " ";position: absolute;left: 0px;top: 0px;right: 0px;border-top: 1px solid #d9d9d9;color: #d9d9d9;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);z-index: 5;}.WxBookContent .FormItemEdit:after {content: " ";position: absolute;left: 0px;bottom: 0px;right: 0px;border-bottom: 1px solid #d9d9d9;color: #d9d9d9;-webkit-transform-origin: 0 100%;transform-origin: 0 100%;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);z-index: 5;} .WxBookContent .InputTips {font-size: 14px;line-height: 1.5;color: #888888;padding: 0px 16px;margin-bottom: 10px;text-align: center;} .WxBookContent .FormItemEdit .TextBox {height: 24px;width: 100%;border: 0px;border-radius: 0px;line-height: 24px;padding: 10px 0px;font-size: 16px;font-weight: normal;} .WxBookContent .FormItemEdit .BtnClear {width: 44px;height: 44px;background: url(../images/Mobile_bg0215.png) center center no-repeat;background-size: 16px 16px;position: absolute;right: 0px;top: 0px;}

0 0