HTML文本框参考样式与常见操作技巧大全.pdfVIP

HTML⽂本框参考样式及常见操作技巧⼤全 在⽹页设计中，常常要使⽤html⽂本框来收集⼀些⽤户信息或是制作登录页，虽然只 是 单的输⼊框，但是如果加⼊⼀些美化设计会使你的页⾯看起来更加有吸引⼒，下 ⾯就给⼤家提供了⼀些html⽂本框的参考样式和常见的html操作技巧，希望对你的⽹ 页制作有帮助。⾸先我们先看看⼀个最 单的⽂本框是如何实现的？ 如上图所⽰，其实这个html⽂本框样式⾮常 单，⽤到了css的伪元素focus 。下⾯我们 ⼀起来重新做⼀个吧。⾸先我们需要在你的页⾯上添加⼀个⽂本框代码如下: input type=text value= / 这个是我们最常见到的按钮了，它没有任何的样式。现在我们来添加⼀些好看的样 式，代码如下： .mytxt { color:#333; line-height:normal; font-family :Microsoft YaHei,Tahoma,Ver ana,SimSun; font-style:normal; font-variant:normal; font-size-a just:none; font-stretch:normal; font-weight:normal; margin-top:0px; margin-bottom:0px; margin-left:0px; pa ing-top:4px; pa ing-right:4px; pa ing-bottom:4px; pa ing-left:4px; font-size:15px; outline-wi th:me ium; outline-style:none; outline-color:invert; bor er-top-left-ra ius:3px; bor er-top-right-ra ius:3px; bor er-bottom-left-ra ius:3px; bor er-bottom-right-ra ius:3px; text-sha ow :0px 1px 2px #fff; backgroun -attachment:scroll; backgroun -repeat:repeat-x; backgroun -position-x :left; backgroun -position-y :top; backgroun -size:auto; backgroun -origin:pa ing-box; backgroun -clip:bor er-box; backgroun -color:rgb(255,255,255); margin-right:8px; bor er-top-color:#ccc; bor er-right-color:#ccc; bor er-bottom-color:#ccc; bor er-left-color:#ccc; bor er-top-wi th:1px; bor er-right-wi th:1px; bor er-bottom-wi th:1px; bor er-left-wi th:1px; bor er-top-style:soli ; bor er-right-style:soli ; bor er-bottom-style:soli ; bor er-left-style:soli ; } 当我们添加了样式以后，我们需要在⽂本框中引⽤此样式。修改⽂本框代码如下： input type=text value= class=mytxt / 好了我们基本的⽂本框样式完成了，现在我们需要在次添加focus按钮。⾸先 单的介 绍⼀下focus按钮的作⽤：就是当我们箭头在⽂本框中的时候触发此样式。 添加css样式如下： .mytxt:focus { bor er: 1px soli #fafafa; -webkit-box-sha ow : 0px 0px 6px #007eff;