布局思路:左边的按钮采用的是绝对定位,中间文本框采用的是flex布局,给它设置flex:1就可以了,然后外面的大盒子用的CSS3盒子模型,这样给边框的时候就不会影响盒子的大小。
功能介绍:当文本框获得焦点的时候,判断里面的文字是不是“手机”,如果是手机则清除文本框中内容,如果是用户输入的其他内容则不清除,同时需要改变里面的文字为更深的颜色;当文本框失去焦点的时候,如果用户没有输入内容则将内容还原为“手机”,同时需要改变里面的文字颜色为起始颜色。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
box-sizing: border-box;
display: flex;
position