web-dev-qa-db-ja.com

ボタンから影を削除する

欲しいボタンは一番下のボタンですが、持っているボタンは一番上です。

enter image description here

この問題は、HTMLの一番上のボタンが次のことから発生します。

<form class="button_to" method="get" action="/"><input type="submit" value="Ok" /></form>

hTMLの下のボタン：

<button type="button">Ok</button>

上のボタンのCSSは次のとおりです。

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

下のボタンのCSSは次のとおりです。

.signup-success button,
.signup-success button:active,
.signup-success button:focus {
  margin-top: 15px;
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

上のボタンがRails .erb extensionから生成される場合に役立ちます

<%= button_to "Ok", root_path, :method => :get %>

上ボタンを下ボタンのように見せてください。私はCSSで影を無効にするコードを入れようとしましたが、うまくいきませんでした:(

htmlcssruby-on-railsshadow
13
LarsChung

ボーダースタイルを使用します。

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
  border-style: solid;
}

または組み合わせたバージョン（border-style、border-width、border-colorが1つ）：

border: 2px solid #00AA66;
18
Jevgenijs Šulins

または、単にborder: noneボタンに

2
Aayushi

面白いことに、ボタンに境界線を追加すると、サファリの奇妙なドロップシャドウが修正されました。

border: 1px solid #34c1e5;
0
Dan Kaiser