Home >Web Front-end >HTML Tutorial >CSS3 submission input box style_html/css_WEB-ITnose

CSS3 submission input box style_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:55:181264browse

Made an input box style, as shown in the picture:


The CSS code is as follows:

#button {    cursor:pointer;    width: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);}

The table code is as follows:

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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn