WeChatウィジェットbuttonスタイルの変更
1198 ワード
今日は変な感じの質問に遭遇しましたbuttonの多くのスタイルを修正しましたが、自分の望む効果が得られませんでした.
例えば、彼は普通のtextと同じように文字を表示できると思いますが、buttonには自分のborder自身の背景があり、デフォルトか文字が中央に表示されています.半日調整しても試していません.最も重要なのは、ウィジェットの公式ドキュメントのコンポーネントにもbuttonのデフォルトcssスタイルが提供されていません.表示から文字の中央、borderの枠線などが使われていると断定できるので、修正を試みることで目的を達成するのは難しいです
ここでbuttonのデフォルトのcssスタイルを提供します.buttonのデフォルトスタイルを知ってこそ、どの属性を変更して目的の効果を達成するかを知ることができます.
上のcssスタイルでbuttonレイアウトの問題を簡単に解決できます.
例:
1、文字がbuttonの中にある問題
text-align:left;次にpadding-left:0 pxを設定します.文字が左に表示されます
2、デフォルトの枠線border問題
以下を使用できます.
button::after { border: none; }
buttonの枠線スタイルは
フィレットを削除したり背景色を変更したりする必要があります
background-color: #fff;
border-radius: 0;
例えば、彼は普通のtextと同じように文字を表示できると思いますが、buttonには自分のborder自身の背景があり、デフォルトか文字が中央に表示されています.半日調整しても試していません.最も重要なのは、ウィジェットの公式ドキュメントのコンポーネントにもbuttonのデフォルトcssスタイルが提供されていません.表示から文字の中央、borderの枠線などが使われていると断定できるので、修正を試みることで目的を達成するのは難しいです
ここでbuttonのデフォルトのcssスタイルを提供します.buttonのデフォルトスタイルを知ってこそ、どの属性を変更して目的の効果を達成するかを知ることができます.
button {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:2.55555556;
border-radius:5px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#F8F8F8;
}
上のcssスタイルでbuttonレイアウトの問題を簡単に解決できます.
例:
1、文字がbuttonの中にある問題
text-align:left;次にpadding-left:0 pxを設定します.文字が左に表示されます
2、デフォルトの枠線border問題
以下を使用できます.
button::after { border: none; }
buttonの枠線スタイルは
::after
で実現されるため、buttonで枠線を定義すると2つの枠線が現れるため、::after
でデフォルト値を上書きすることができます.フィレットを削除したり背景色を変更したりする必要があります
background-color: #fff;
border-radius: 0;