Question

我一直在使用我的网站w / c使用我可以使用的内置html编辑器，我正在尝试复制此页面上的表单样式：https://imsc.clickfunnels.com/auto-webinar-registration10074792

以下是我目前在JSFIDDLE中的工作：https://jsfiddle.net/su5rr2nh/1/

但是我不确定为什么我无法获得确切的样式，包括文本框的高度，宽度和选择/下拉元素。如您所见，图像不会进入文本框内，而且我的按钮看起来也不一样。

继承我的代码：

<div style="padding: 40px; background-color: rgba(243, 242, 242, 0.611765); border: 3px dashed rgba(0,0,0,0.7);">
   <h1 style="font-size: 32px; text-align: center; font-weight: bold;">FREE BONUS!</h1>
   <h4 style="font-size: 18px; color: rgba(47, 47, 47, 0.6); text-align: center;">Reserve your seat TODAY for this free training, and we will send you our <span style="font-weight: bold;">Amazon's Secret Business Cheatsheet</span> that will get you up and running in NO TIME!</h4>
   <input id="name" style="border-radius: 5px !important; padding: 10px 90px; margin-top: 10px;" name="name" type="text" placeholder="Your Name.." />
   <img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/name2.png"/>
   <input id="email" style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;" name="email" type="email" placeholder="Your Email.."/>
   <img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/email2.png"/>
   <select style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;">
      <option value="desired">Select Desired Date</option>
      <option value="yesterday">Watch Yesterday's Broadcast Now</option>
      <option value="feb8th">Wednesday, Feb 8th, 2017</option>
      <option value="feb8th">Wednesday, Feb 8th, 2017</option>
   </select>
   <button style="padding: 13px 35px; margin-right: auto; margin-left: auto; color: #fff; font-weight: bold; display: inline-block; -ms-transform: all .2s ease-in-out; -webkit-transform: all .2s ease-in-out; transform: all .2s ease-in-out; text-align: center !important; text-decoration: none !important; background-color: #ea6645;">Register Your Spot Now! * seats are extremely limited *</button>

   <p>* we will not spam, rent or sell your information *</p>
   <p>Your Local Time: 4:18 PM</p>
</div>

我正在努力复制每一种风格，但它还没有出现。有什么帮助来检查我错过了什么？如果你愿意，随意修改我的jsfiddle。我只是想复制它的风格。我已经使用了chromes inspector元素但是代码太多了。

请帮忙。

Answer 1

您需要使用：

background-image: url(/images/email2.png);
background-repeat: no-repeat;
 background-position: 96%;

在你的文本框上。

Answer 2

更新和解释

＆＃13;

//text-align: left; sets the text start at the left of the input.
//border: 1px solid rgba(0,0,0,0.2); sets a border with 1px solid design, in the color black, with an alpha value of 0.2
//box-shadow: 0 0 0 3px rgba(0,0,0,0.5); sets a shadow at the bottom of the input with 3px height and black color with an alpha value of 0.5
//background-color: #fff; sets the background of the input to white
//border-radius: 5px; rounds the corners of the input
//background-position: 96%; sets the background at 96% of the input. (allmost right)
//background-image: url(https://appassets1.clickfunnels.com/images/name2.png); sets the background to the image, that is found at the URL.
//background-repeat: no-repeat; sets the background to no repeat. Each background would repeat, until the end of the element. We only want the background once. so we dont to repeat it.
//appearance: none; some browsers let elements appear custom. we dont want it.
//padding: 12px 18px; to size up the input a bit. otherwise the text would hit top, left, bottom.
//font-size: 16px; sets the text size to 16px.
//width: calc(100% - 36px); calculates the with of the input. 100% for the whole area. -36px for the padding(18px) that we added to the right and left of the input.

＆＃13;

<input type="text" placeholder="Enter Your Name..." name="name"  data-type="extra" style="text-align: left; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); background-color: #fff; border-radius: 5px; background-position: 96%; background-image: url(https://appassets1.clickfunnels.com/images/name2.png); background-repeat: no-repeat; appearance: none; padding: 12px 18px; font-size: 16px; width: calc(100% - 36px);">

＆＃13;

我的表单样式不匹配 - HTML和CSS

2 个答案: