search

Home  >  Article  >  Web Front-end  >  css to create an underline input box_html/css_WEB-ITnose

css to create an underline input box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:281626browse

Similar to this effect

<input type="text" class="input" />

Simple version

    border: 0;    outline: 0;    background: transparent;    border-bottom: 2px solid black;    width: 20px;

Slightly more complicated and beautiful 

    background-color: transparent;        border: none;        border-bottom: 2px solid #fff;        outline: none;        padding-bottom: 10px;        text-align: center;        width: 400px;        font-size: 300%;        color: #fff;        font-weight: 100;
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
Previous article：CSS Summary (Part 2)_html/css_WEB-ITnoseNext article：CSS Summary (Part 2)_html/css_WEB-ITnose

Related articles

See more