提示：您可以先修改部分代碼再運行
<html><head><title></title><style type="text/css">input, textarea{ color: #888; padding: 5px; margin: 10px; outline: none; overflow:hidden; border-radius: 5px; background: #fafafa; border: 1px solid #ddd; -moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); -webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; } .style1{ width: 150px; } .style1:focus{ width: 230px; } .style2{ float: right; width: 150px; } .style2:focus{ width: 230px; } .style3{ width: 10%; } .style3:focus{ width: 98%; } .style4{ height: 2em; width: 230px; } .style4:focus{ height: 8em; } </style></head><body><input class="style1" type="text" value="向右伸長一點點" /> <br /> <input class="style2" type="text" value="向左伸長一點點" /> <br /> <input class="style3" type="text" value="什嗎？你的搜尋字詞很長？這個夠用嗎？" /> <br /> <textarea class="style4">下面有什麼東西呢？ 祝君好運！ ~~~~
提示：您可以先修改部分代碼再運行
