前端入门学习笔记六十九_background-color: seashell-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_65384293/article/details/128272065

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框（input） 图标</title> 
		<style  type = "text/css"> 
		input[type=text] {
		  width: 90%;
		  box-sizing: content-box;
		  border: 3px solid skyblue;
		  border-radius: 9px;
		  font-size: 32px;
		  background-color: seashell;
		  background-image: url('http://www.baidu.com/盗墓笔记.jpg');
		  background-position: 30px 30px; 
		  background-repeat: no-repeat;
		  padding: 20px 30px 20px 50px;
		}
		</style>
	</head>
	<body>
		<p>输入框（input） 图标:</p>
		<form>
		  <input type="text" name="盗墓笔记" placeholder="盗墓笔记">
		</form>
	</body>
</html>

CSS 表单
输入框（input）图标
输入框中添加图标，可以使用属性和用于定位的属性。
background-position

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>带动画的搜索框</title> 
		<style type = "text/css">
		input[type=text] {
		  width: 100px;
		  box-sizing: border-box;
		  border: 3px solid skyblue;
		  border-radius: 9px;
		  font-size: 9px;
		  background-color: darkgray;
		  background-image: url('http://www.baidu.com/盗墓笔记之沙海.jpg');
		  background-position: 20px 20px; 
		  background-repeat: no-repeat;
		  padding: 20px 30px 20px 60px;
		  -webkit-transition: width 1s ease-in-out;
		  transition: width 1s ease-in-out;
		}
		
		input[type=text]:focus {
		  width: 100%;
		}
		</style>
	</head>
	<body>
		<p>带动画的搜索框</p>
		<form>
		  <input type="text" name="盗墓笔记之沙海" placeholder="盗墓笔记之沙海">
		</form>
	</body>
</html>

CSS 表单
带动画的搜索框
CSS 属性，该属性设置了输入框在获
取焦点时会向右延展。
-webkit-transition
transition

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>文本框（textarea）样式 </title> 
		<style type = "text/css">
		textarea {
		  width: 200%;
		  height: 300px;
		  padding: 20px 30px;
		  box-sizing: content-box;
		  border: 3px solid deepskyblue;
		  border-radius: 9px;
		  background-color: white;
		  font-size: 32px;
		  resize: none;
		}
		</style>
	</head>
	<body>
		<p><strong>文本框（textarea）样式 </strong>盗墓笔笔记之沙海</p>
		<form>
		  <textarea>盗墓笔笔记之藏海花</textarea>
		</form>
	</body>
</html>

CSS 表单
文本框（textarea）样式

<textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本

为了提高无障碍（accessibility），用于将与一个 <label> 关联的 属性。<textarea>id

name属性，用于设置随表单一同提交到服务器的相关数据的名字。

rows和属性，用于声明的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。cols<textarea>

位于开始标签和闭合标签之间的默认内容。不支持属性。<textarea>value

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>文本框（textarea）样式 </title> 
		<style type = "text/css">
		textarea {
		  width: 200%;
		  height: 300px;
		  padding: 20px 30px;
		  box-sizing: content-box;
		  border: 3px solid deepskyblue;
		  border-radius: 9px;
		  background-color: white;
		  font-size: 32px;
		  resize: none;
		}
		</style>
	</head>
	<body>
		<p><strong>盗墓笔笔记</strong>盗墓笔笔记之沙海</p>
		<form>
		  <textarea>盗墓笔笔记之终极笔记</textarea>
		</form>
	</body>
</html>

CSS 表单
文本框（textarea）样式

<textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本

为了提高无障碍（accessibility），用于将与一个 <label> 关联的 属性。<textarea>id

name属性，用于设置随表单一同提交到服务器的相关数据的名字。

rows和属性，用于声明的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。cols<textarea>

位于开始标签和闭合标签之间的默认内容。不支持属性。<textarea>value