CSS实例教程:网页页面input键入框立体式实际效果

2021-03-15 18:34 jianzhan

上年经常玩高兴网,耗在上面的時间也很多,泊车位、交易奴仆这些。尽管高兴网也并不是祖先(效仿facebook和校内)。但游戏娱乐之余,我還是好好的科学研究了1下高兴网,它的互动式做的很优异.
在平常,经常会提示自身要做1个擅于发现的人,時刻发现细节,这样才会更为晓得日常生活、会让日常生活更为精彩。
在学习培训上也是这般,大家经常会发现有很网站做的很棒,变成争像效仿的目标,她们好在哪儿里?1定有她们的可取的地方、有她们值得去科学研究和学习培训的地区。
上年经常玩高兴网,耗在上面的時间也很多,泊车位、交易奴仆这些。尽管高兴网也并不是祖先(效仿facebook和校内)。但游戏娱乐之余,我還是好好的科学研究了1下高兴网,它的互动式做的很优异,举1个事例:
往下拉的select框沒有用传统式的往下拉式,而是用层的弹出和掩藏来替代传统式的select往下拉框,如图:


这里不去科学研究它的实际完成方式,来讨论1下input键入框的完成方式,恰好在近期的新项目中我也用到了此主要表现方式。

一开始在迷茫用css是如何完成的,变大看来会发现实际上很简易:
用firebug查询源码,发现,在input外面再加上1个span标识,界定span的border为灰色(#979797),再把input的默认设置情况的border界定为白色,电脑鼠标点一下后界定border-left和border-right为黑色(border-left:1px solid #000; border-top:1px solid #000})。
编码:
<!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>input键入框科学研究</title>
<style type="text/css">
<!--
.it_s { display:table; border:1px solid #979797}
.it1,.it2 { border:1px solid #fff; background:#fff none repeat scroll 0 0}
.it1 { border:1px solid #fff;}
.it2 { border-left:1px solid #000; border-top:1px solid #000}
-->
</style>
</head>
<body>
<span class="it_s"><input type="text" name="textfield" onblur="this.className='it1';" onfocus="this.className='it2';" class="it1" size="25"/></span>
</body>
</html>