jsf创建浮动式标签

最新推荐文章于 2023-12-17 20:15:07 发布

浪_淘_沙

最新推荐文章于 2023-12-17 20:15:07 发布

阅读量848

点赞数

分类专栏： jsf 文章标签： jsf 标签

本文链接：https://blog.csdn.net/ZJin_Hua/article/details/23826229

版权

jsf 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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>

效果如下：