背景・実現したいこと
kViewerルックアップの検索ボタンについて、
検索窓を非表示にすると左側の角だけ尖った状態になるので、
border-radius: 10px;と記述して角を丸めようとしたのですが右側の角しか丸まりません。
指定する箇所が違うのでしょうか。
お忙しいところ恐縮ですが、どなた__か_ご教示いただけますでしょう_か。
利用したソースコード
[data-vv-name="受験日を選択"] form .el-icon-search:before{
content: '受験日検索';
}
[data-vv-name="受験日を選択"] form .el-input__inner {
display:none;
}
[data-vv-name="受験日を選択"] form div {
background-color: #fff;
border: 0;
}
[data-vv-name="受験日を選択"] form .kviewer-lookup-button {
border-radius: 10px;
}
demachiさん
お世話になっております。
スタイルの優先順位の問題かと思います。
http://www.htmq.com/csskihon/007.shtml
セレクタを「body .ui.form .kviewer-lookup .kviewer-lookup-input .kviewer-lookup-button」などとして、フォームブリッジのデフォルトのCSS以上の詳細度にすると適用されるかと思います。
フォームブリッジのデフォルトのCSSがどのようになっているかは、ブラウザのデベロッパーツールを用いて確認できます。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
江田 様
セレクタを「body .ui.form .kviewer-lookup .kviewer-lookup-input .kviewer-lookup-button」にしたところ適用されましたが、
ルックアップがWebフォーム上に２つあり、1つだけに適用したかったので、
教えていただいたサイトを参考に1つだけを「!important;」で指定したところ思った動作になりました！
（この記述で良いのか自信がありませんが…）
[data-vv-name="受験日を選択"] form .kviewer-lookup-button {
border-radius: 10px !important;
}
ご教示いただきありがとうございました！！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。