<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
form{
/*margin: 5em;*/
backface-visibility: hidden;
}
.input{
position: relative;
float: left;
margin: 10px;
}
input{
border: 1px solid #eee;
padding: 1.5em 0.5em 0.5em 0.5em;
outline: none;
}
input + label {
position:absolute;
left:10px;
top:5%;
/*transform:translateY(-50%);*/
color:#aaa;
/*transition:all .2s ease;*/
}
input:focus + label{
color: #52A5FB;
/* font-size: .65em; */
top: 5%;
/*transform: none;*/
}
.not-empty + label {
color:#aaa;
}
</style>
</h:head>
<h:body>
<h:form>
<div class="input">
<input type="text" id="name"/>
<label for="name">YourName</label>
</div>
<div class="input">
<input type="text" id="address"/>
<label for="address">Your address</label>
</div>
<div class="input">
<h:inputText id="tel"/>
<h:outputLabel for="tel" value="電話"/>
</div>
<h:panelGroup class="input">
<h:inputText id="email"/>
<h:outputLabel for="email" value="郵箱"/>
</h:panelGroup>
<script>
var inputs = document.getElementsByTagName('input');
for (i = 0; !(i >= inputs.length); i++) {
var input = inputs[i];
input.addEventListener('keyup', bindUI, false);
}
function bindUI() {
if (this.value) {
this.classList.add('not-empty');
} else {
this.classList.remove('not-empty');
}
}
</script>
</h:form>
</h:body>
</html>效果如下：
