zoukankan      html  css  js  c++  java
  • CSS3提交意见输入框样式

    做了个输入框样式,如图:


    CSS代码例如以下:

    #button {
        cursor:pointer;
        30%;
        margin:5px;
        padding:8px;
        border-radius:4px 4px 4px 4px;
        font-size:14px;
        font-weight:bold;
    }
    input{
    	transition:all 0.30s ease-in-out;
    	-webkit-transition: all 0.30s ease-in-out;
    	-moz-transition: all 0.30s ease-in-out;
    	
    	border:#364f86 1px solid;
    	border-radius:3px;
    	outline:none;
    }
    input:focus{
    	box-shadow:0 0 5px rgba(81, 203, 238, 1);
    	-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
    	-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
    }
    textarea{
    	transition:all 0.30s ease-in-out;
    	-webkit-transition: all 0.30s ease-in-out;
    	-moz-transition: all 0.30s ease-in-out;
    	
    	border:#364f86 1px solid;
    	border-radius:3px;
    	outline:none;
    }
    textarea:focus{
    	box-shadow:0 0 5px rgba(81, 203, 238, 1);
    	-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
    	-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
    }

    table代码例如以下:

    <table>               
                    <tr>
                        <td>用户名</td>
                        <td><input name="username" type="text" id="username" placeholder="用户名"  style="height:25px"></input>*</td>
                    </tr>
                                  
                    <tr>
                        <td>联系方式</td>
                        <td><input name="contact" type="text" id="contact" placeholder="电话或邮件地址"  style="height:25px"></input>*</td>
                    </tr>
    
                    <tr>
                        <td>意见及建议</td>
                        <td><textarea name="comment" id="comment" rows="9" cols="112" ></textarea></td>
                    </tr>               
    			    
    			    <tr>
    				<td colspan="2"align="center"><input type="submit" id="button" value="提交" /></td>
    			    </tr>
    </table>


  • 相关阅读:
    Spring Boot:自动配置原理
    centos7安装zookeeper
    spring集成RabbitMQ
    centos7安装RabbitMQ
    centos7安装MongoDB4.0(yum安装)
    nginx日志分割
    centos7 yum安装nginx
    centos7使用cronolog分割tomcat8.5的catalina.out日志
    ubuntu18安装微信
    idea打开dashboard
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/7392070.html
Copyright © 2011-2022 走看看