www.baike369.com
百科369 > CSS教程 > CSS轮廓outline属性与焦点

CSS轮廓outline属性与焦点


CSS轮廓outline属性与焦点

轮廓一般用于突出元素,因此经常和:focus伪类搭配使用以显示当前焦点所在的元素。


实例

光标所在的输入框会有红色的轮廓。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS轮廓outline属性与焦点实例-www.baike369.com</title>
<style type="text/css">
<!--
div{
  margin:10px auto;
  width:500px;
  line-height:34px;
  border:2px solid #060;
  background:#06F;
}
p{
  background:#CCC;
  padding-left:10px;
}
#test_form input[type="text"]{  /* 属性选择器 */
  border:1px solid #999;
}
#test_form input[type="text"]:focus{
  border:1px solid #09F;
  outline:5px solid red;
}
-->
</style>
</head>
<body>
<div>
<form id="test_form" method="post" action="#">
  <fieldset>
    <legend>用户基本信息</legend>
    <p><label for="nikename">昵称:</label>
       <input name="nikename" id="nikename" type="text" size="16" maxlength="30" tabindex="1" /></p>
	<p><label>地址:</label>
	   <input name="address" id="address" type="text" value="" size="30" tabindex="2" /></p>
    <p><input type="radio" name="sex" id="sex_male" value="male" tabindex="3" />
       <label for="sex_male">男</label>
       <input type="radio" name="sex" id="sex_female" value="female" tabindex="4" />
       <label for="sex_female">女</label></p>
    <p><input type="submit" name="btn_submit" value="提交" tabindex="5" />
       <input type="reset" name="btn_reset" value="重置" tabindex="6" /></p>
  </fieldset>
</form>
</div>
</body>
</html>

显示效果如下:

CSS轮廓outline属性与焦点实例的操作效果

本例使用了属性选择器,轮廓将只匹配“type”属性为“text”的<input>元素,而对于单选框和按钮都没有作用。

Copyright© 2011-2016 www.baike369.com All Rights Reserved