如何更改表单的背景使其看起来像两种形式?

时间:2013-12-05 02:06:50

标签: css drupal drupal-7

以下是我想要实现的目标: enter image description here

这是我到目前为止所做的: enter image description here 我正在使用Drupal 7.这是测试网站的链接:http://test-caal.gotpantheon.com/

这是我想要制作的两种形式。有没有办法添加背景图像,使其看起来与我试图实现的相同?

感谢您的帮助!

和泉。

2 个答案:

答案 0 :(得分:1)

jsBin demo

enter image description here

表单允许您使用<fieldset></fieldset>标记。

类似

<form id="" action="" method="">    
    <fieldset>
        <!-- inputs here -->
    </fieldset>
    <fieldset>
        <!-- inputs here -->
    </fieldset>    
</form>

并相应地设计,可能是你正在寻找的。请看上面的演示链接。

 <form id="" action="" method="">

    <fieldset>
      <h3>Member Login</h3>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Password">
    </fieldset>
    <fieldset>
      <h3>Partner Login</h3>
       <input type="text" placeholder="Username">
       <input type="text" placeholder="Password">
    </fieldset>   

</form>

基本CSS:

form h3{
  color:#fff;
  font-family:Helvetica, Arial, sans-serif;
  font-size:1.4em;
  padding:10px 0;
  border-top:2px solid #fff;
  border-bottom:1px solid #fff;
}
fieldset{
  background:#589FCF;
  border: 5px solid #2E2E2E;
  width:180px;
  display:block;
  float:left;
  margin:0;
}
form input[type=text]{
  border:0;
  padding:10px;
  margin-bottom:2px;
}

答案 1 :(得分:1)

对于您要实现的目标,可以选择两种不同的形式,因为您有两个不同的sign in按钮。做这样的事情:

<div id="forms">
   <form id="form1">
   /*Form stuff goes here*/
   </form>
   <form id="form2">
   /*Other form goes here*/
   </form>
</div>

对于你的CSS,只需将forms的背景设置为黑色,将其他表格元素的背景设置为蓝色,或任何你想要的颜色,这里,给定的颜色是图片中的颜色。

#forms{
   background-color:black;
}
#form1 #form2{
    background-color:rgb(69,136,203); 
}