0

我有一个带有用于电子邮件输入的文本框和一个按钮的表单。该按钮在技术上是一个 HTML button。表单的 HTML 是这样的：

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <button type="submit">
    Submit
  </button>
</form>

JSFiddle 代码：http: //jsfiddle.net/ahmadka/aDhUL/

我想将button type="submit"控件转换为input type="submit"，同时保留所有当前的 CSS，以便在视觉上没有变化。我猜 CSS 需要更新。我自己尝试这样做，但我无法正确更新 CSS。

有人可以帮我吗？

4

4 回答 4

1

您只需要在样式表中更改button为input[type=submit]。如果这不起作用，那么您需要更具体地说明您遇到的问题。

于 2013-07-09T19:10:36.997 回答
1

基本解决方案需要在 CSS 中随处更改以下内容

button -> input[type=button]
input -> input[type=text]

我更喜欢添加一个 CSS 类，而不是引用标签名称，你可以使用

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

这将需要在您的 CSS 中随处更改以下内容

button -> input.btn
input -> input.text

这还没有完全完成，但几乎可以工作http://jsfiddle.net/aDhUL/7/

问题是input:before指令在输入中插入了一个元素。允许button，但不允许input，因为input不能有子元素。http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

所以（如果你想使用:before）你必须回到一个按钮，在文本字段和按钮之间插入一个span元素不会让你在箭头和按钮上都有悬停效果。

为什么要首先使用input type="submit"？

于 2013-07-09T19:17:59.037 回答
0

你将不得不编辑 CSS，不要偷懒 :)

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <input type="submit" class="btn" value="submit">
</form>

CSS

.btn{
color:green;
}

现在你也可以在 CSS 中添加类后使用

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <button type="submit" class="btn">Button</button>
</form>
于 2013-07-09T19:12:24.803 回答
0

必须更新所有样式表才能这样做：

现在是什么：

/* Form submit button */
.form-wrapper button {

需要变成这样：

/* Form submit button */
.form-wrapper input[type=submit] {

在那个下面还有一堆要更新的类..

编辑：将其从类更改为乔指出的样式。

于 2013-07-09T19:12:54.197 回答