如何为 type="button" 的输入设置样式？答案

【问题标题】：How to style an input that is a type="button"?如何为 type="button" 的输入设置样式？
【发布时间】：2014-03-12 14:04:05
【问题描述】：

我正在尝试使 CSS 更改成为一个弹出窗口，基本上是一个居中的 div，带有一个 cookie 策略，然后是一个“接受”按钮。我正在使用 DNN CMS，并且弹出窗口是一个模块，因此无法更改 div 或类名。

CSS 适用于“接受”按钮，但随后会影响评论表的输入。如何编写 CSS 以使 CSS 仅影响该 div 中的“接受”按钮？

顺便说一句，“接受”按钮是一个输入，即 type="button"。

“接受”按钮的 HTML

<input name="CookieConsent_CloseLink" id="View_CookieConsent_sal_CloseLink" value="Accept" type="button">

“接受”按钮的 CSS

#View_CookieConsent_sal_CloseLink button, input {
font-family: 'Oswald', arial, sans-serif;
text-transform: uppercase;
font-size: 14px;
padding: 5px;
position: absolute;
left: 40%;
margin-top: 10px;
margin-bottom: 10px;
}

“接受”按钮的 HTML

<input name="txtYourName" value="Anonymous" id="txtYourName" class="NormalTextBox" style="width: 100%" type="text">

【问题讨论】：

那里还有其他按钮吗？否则，input[type=button] { /* properties */ } 会起作用。如果有，input[name=CookieConsent_CloseLink] 更具体。或者，如果你知道它不会改变，你可以只使用 id。
可以通过属性input[type=button]定位输入
谢谢两位。 input[type="button] 解决了我的问题。
只需使用 id #View_CookieConsent_sal_CloseLink 作为选择器

标签： html css button input

【解决方案1】：

input[type="button"] {
  font-family: 'Oswald', arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px;
  position: absolute;
  left: 40%;
  margin-top: 10px;
  margin-bottom: 10px;
}

【讨论】：

【解决方案2】：

我假设您只想使用 type=button 定位第一个接受按钮

#View_CookieConsent_sal_CloseLink {
....
}

应该工作

当您执行 #View_CookieConsent_sal_CloseLink 按钮时，您的目标是该 ID 内的按钮。您还可以按属性定位标签

input[type=button] { ....  }

【讨论】：

【解决方案3】：

The id would have to be unique in your page. 我看到你生成了一个id="txtYourName"。使用它。

#txtYourName{
   ...
}

【讨论】：

【解决方案4】：

而不是#View_CookieConsent_sal_CloseLink 按钮，输入

使用这个 #txtYourName ,#View_CookieConsent_sal_CloseLink

所以 CSS 会触发 id 为 txtYourName 的按钮和 id 为 View_CookieConsent_sal_CloseLink 的 cookie

祝你好运

【讨论】：