blocks|key|1610300|text|最简单的解决方案是将图标和发光样式都添加到输入背景中(每个输入都不同)，然后在输入中添加padding。亲吻规则;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1610301|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>the easiest solution would be to add both icon and glow style into input background (different for each input) and then add padding-left to input. KISS rule ;)</p>


blocks|key|1629095|text|如果使用before语句呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1629096|input#username:before{
++++content:+url('user-icon.png');
}|code-block|syntax|javascript|1629097|http://www.w3schools.com/cssref/sel_before.asp|offset|length|1629098|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1A|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>what about using a before statement?</p>

<pre><code>input#username:before{
    content: url('user-icon.png');
}
</code></pre>

<p><a href="http://www.w3schools.com/cssref/sel_before.asp" rel="nofollow">http://www.w3schools.com/cssref/sel_before.asp</a></p>


blocks|key|1628932|text|仅剪切阴影，并将其设置为绝对定位的div，右侧为:+0；(假设父对象为表单框)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1628933|由于阴影框下的元素将不可点击(您将有一个矩形来显示三角形)，您将不得不在阴影框上创建不可见的div，以便在单击时将输入框作为焦点。|1628934|z-index的顺序如下：|1628935|1628936|Input+box|ordered-list-item|1628937|Shade+box|1628938|不可见div在单击时将焦点发送到输入框|1628939|1628940|这是我首先想到的。|1628941|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|Y|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>Cut out the shade only and make it an absolute positioned div with right: 0; (assuming parent is the form box)</p>

<p>Since elements under the shade box won't be clickable (You will have an rectangle to show triangle), you will have to make invisible divs OVER shade box that will focus input boxes on click.</p>

<p>Order of z-index would be like this:</p>

<ol>
<li>Input boxes</li>
<li>Shade box</li>
<li>Invisible divs to send focus to input boxes on click</li>
</ol>

<p>That's what comes first to my mind.</p>


blocks|key|1628946|text|我在想，如果它的实际上可以使这个表单在CSS+widthgradient中，所以我试了一试。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1628947|结果如下：|1628948|这并不完全像图片中的形式，比特嘿！我不是网页设计师。通过一些CSS天才的改进，你可以让它看起来与图片中的一模一样。|1628949|用你想要的图标替换?图标。|1628950|HTML|1628951|<div+class="container">+
++++<div+class="form">
++++++++<div+class="header">
++++++++++++Member+Login
++++++++</div>
++++++++<div+class="body">
++++++++++++<form>
++++++++++++++++<input+type="text"+placeholder="Username">
++++++++++++++++<input+type="password"+placeholder="Password">
++++++++++++++++<input+id="rememberme"+type="checkbox">
++++++++++++++++<label+for="rememberme">Remember</label>
++++++++++++++++<input+type="submit"+value="Login+Now">
++++++++++++</form>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|1628952|CSS|1628953|body+{
++++font-family:+helvetica,+sans-serif;
}

@font-face+{
++++font-family:+'icons';
++++src:+url('icons.ttf')++format('truetype');
}

div,+input+{
++++box-sizing:+border-box;
}

.container+{
++++width:+500px;
++++height:+350px;
++++padding:+35px+0;
++++background:+-webkit-linear-gradient(left,+#C2DD9A,+#F5FBF0+50%25,+#C2DD9A);+
}

.form+{
++++width:+365px;+height:+274px;
++++margin:+auto;
++++background:+rgba(0,0,0,.23);
++++padding:+2px;
}

.header+{
++++height:+44px;
++++line-height:+44px;
++++padding-left:+30px;
++++font-size:+20px;
++++background:+url('http://i.imgur.com/s0O9hy0.png')+325px+center+no-repeat,+-webkit-linear-gradient(top,+rgb(253,253,253),+rgb(198,203,199));
}

form+{
++++margin:+0+31px;
}

input[type=text],+input[type=password]+{
++++display:+block;
++++width:+100%25;
++++height:+38px;
++++padding-left:+38px;
++++background:+url('http://i.imgur.com/s0O9hy0.png')+10px+center+no-repeat,+-webkit-linear-gradient(45deg,+#404040+0%25,+#404040+60%25,+#535353+60%25,+#494949);
++++color:+#AAA;
++++border:+1px+solid+black;
++++transition:+box-shadow+.3s;
}

input[type=text]:focus,+input[type=password]:focus+{
++++outline:+0;
++++box-shadow:+inset+0+0+8px+rgba(226,239,207,.7);
}

input[type=text]+{+margin-top:+36px;+margin-bottom:+26px;+}

input[type=password]+{+margin-bottom:+36px;+margin-top:+26px;+}

input[type=checkbox]+{
++++-webkit-appearance:+none;
++++width:+11px;+height:+11px;
++++border-radius:+10px;
++++background:+rgba(0,0,0,.5);
++++margin:+0+5px;
}

input[type=checkbox]:checked+{
++++background:+-webkit-radial-gradient(center+center,+circle,+white+0%25,+white+30%25,+rgba(0,0,0,.5)+50%25);
}
input[type=checkbox]+%2B+label+{
++++color:+white;
++++font-size:+15px;
++++padding-bottom:+3px;
}

input[type=submit]+{
++++float:+right;
++++width:+134px;+height:+31px;
++++border:+1px+solid+#B7DA7C;
++++background:+url('http://i.imgur.com/s0O9hy0.png')+15px+center+no-repeat,+-webkit-linear-gradient(top,+#99CC4B,+#73A52C);
++++font-weight:+bold;
++++color:+white;
++++text-align:+right;
++++padding-right:+22px;
}

input[type=submit]:active+{
++++box-shadow:+inset+0+-3+5px+rgba(0,0,0,.5);
++++background:+-webkit-linear-gradient(top,+#649126,+#7DB731);
}|1628954|entityMap^0|8|3|S|8|0|0|0|9|1|0|0|4|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|14|8|@]|E|@]|F|$]]|$1|I|3|J|5|6|7|15|8|@]|E|@]|F|$]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|D]]|E|@]|F|$]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|E|@]|F|$]]|$1|O|3|P|5|Q|7|1C|8|@]|E|@]|F|$R|S]]|$1|T|3|U|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|E|@]|F|$]]|$1|V|3|W|5|Q|7|1G|8|@]|E|@]|F|$R|S]]|$1|X|3|-4|5|6|7|1H|8|@]|E|@]|F|$]]]|Y|$]]

<p>I was thinking if its <strong>actually</strong> possible to make this form in CSS width<code>gradient</code>, so I gave it a try. </p>

<p>Here's the result: <a href="http://jsfiddle.net/w9BG2/"><strong>Demo</strong></a></p>

<p>Its not exactly like the form in picture, byt hey! I am no web designer.
And with some improvements from some CSS genius, you can make it look exactly like the one in picture.</p>

<p>Replace <code>?</code> icon with the one you want.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="container"&gt; &lt;!-- Unnecessary tag --&gt;
    &lt;div class="form"&gt;
        &lt;div class="header"&gt;
            Member Login
        &lt;/div&gt;
        &lt;div class="body"&gt;
            &lt;form&gt;
                &lt;input type="text" placeholder="Username"&gt;
                &lt;input type="password" placeholder="Password"&gt;
                &lt;input id="rememberme" type="checkbox"&gt;
                &lt;label for="rememberme"&gt;Remember&lt;/label&gt;
                &lt;input type="submit" value="Login Now"&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>body {
    font-family: helvetica, sans-serif;
}

@font-face {
    font-family: 'icons';
    src: url('icons.ttf')  format('truetype');
}

div, input {
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 350px;
    padding: 35px 0;
    background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A); 
}

.form {
    width: 365px; height: 274px;
    margin: auto;
    background: rgba(0,0,0,.23);
    padding: 2px;
}

.header {
    height: 44px;
    line-height: 44px;
    padding-left: 30px;
    font-size: 20px;
    background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}

form {
    margin: 0 31px;
}

input[type=text], input[type=password] {
    display: block;
    width: 100%;
    height: 38px;
    padding-left: 38px;
    background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
    color: #AAA;
    border: 1px solid black;
    transition: box-shadow .3s;
}

input[type=text]:focus, input[type=password]:focus {
    outline: 0;
    box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}

input[type=text] { margin-top: 36px; margin-bottom: 26px; }

input[type=password] { margin-bottom: 36px; margin-top: 26px; }

input[type=checkbox] {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 10px;
    background: rgba(0,0,0,.5);
    margin: 0 5px;
}

input[type=checkbox]:checked {
    background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
    color: white;
    font-size: 15px;
    padding-bottom: 3px;
}

input[type=submit] {
    float: right;
    width: 134px; height: 31px;
    border: 1px solid #B7DA7C;
    background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
    font-weight: bold;
    color: white;
    text-align: right;
    padding-right: 22px;
}

input[type=submit]:active {
    box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
    background: -webkit-linear-gradient(top, #649126, #7DB731);
}
</code></pre>


<p>I want to write CSS and HTML to made this input forum from a psd file<img src="https://i.stack.imgur.com/CHPOy.jpg" alt="enter image description here"></p>

<p>I have few questions to ask:</p>

<p>First of all I cutted the background (without the other graphic elements). The header is simple to style. With the input text I found difficult: I would that when an user click over the rectangle, the text and the icon disappear.</p>

<p>this is my css code:</p>

<pre><code>input{
    background: url('input-bg.png') no-repeat;
    border: none;
    width: 303px;
    height: 36px;
}
#username{
    background: url('user-icon.png') no-repeat left;
}
#password{
    background: url('password-icon.png') no-repeat left;
}
</code></pre>

<p>where input-bg.png is the following image:
<img src="https://i.stack.imgur.com/GOuYt.png" alt="enter image description here"></p>

<pre><code>&lt;div id="form-login"&gt;&lt;img id="member-icon" src="member-icon.png" /&gt;
    &lt;h2&gt;Member login&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;input type="text" id="username" placeholder="User Name"/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;input type="password" id="password" placeholder="Password" /&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt; 
</code></pre>

<p>The problem is that the small icons are not showed because the background define of the input text overwite they. There is a simple way so solve this?</p>

<p>There is a simple way to reproduce also the glow effect on the right? i thought about put the effect with a value of the z-index highter than the other elements, but obviously there is a problem if you click over the button or the inputtext in the right of the form. Any suggestion?</p>


Style form input login

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想写CSS和HTML来使这个输入论坛从一个私营部门司文件​我有几个问题要问：首先，我剪切了背景(没有其他图形元素)。标题的样式很简单。对于输入的文本，我发现很困难:当用户单击矩形时，文本和图标就会消失。这是我的css代码：input{    background: url('input-bg.png') no-rep...

问样式表单输入登录
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式表单输入登录EN