相关疑难解决方法(0)

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么？

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

例

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

(演示)

非目标

• 动画.
• 非CSS过滤器解决方案.
• 从黑色以外的颜色开始.
• 关心黑色以外的颜色会发生什么.

结果到目前为止

• 强力搜索固定过滤器列表的参数:https
  ://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).

• 使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励

• 一个drop-shadow解决方案: /sf/answers/3077189741/
  缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

• 如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

  Run Code Online (Sandbox Code Playgroud)

是否可以设置所选单选按钮的中心圆,另外至少在webkit浏览器中...？

我现在拥有的:

我想要的是:

我可以按如下方式更改背景颜色,阴影等

#searchPopup input[type="radio"]{
  -webkit-appearance:none;
  box-shadow: inset 1px 1px 1px #000000;
  background:#fff;
}

#searchPopup input[type="radio"]:checked{
  -webkit-appearance:radio;
  box-shadow: none;
  background:rgb(252,252,252);
}

有任何想法吗..？

当我选择它时,我希望有一个绿色边框环绕绿色边框.
这就是我所拥有的:

input[type='radio'] {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        outline: none;
        box-shadow: 0 0 0 2px gray;
    }

    input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

    input[type='radio']:checked:before {
        background: green;
    }

    .role {
        margin-right: 80px;
        margin-left: 20px;
        font-weight: normal;
    }

    .checkbox label {
        margin-bottom: 20px !important;
    }

    .roles {
        margin-bottom: 40px;
    }

和模板:

<div class="roles">
    <input type="radio" name="role" value="ONE" id="one">
    <label class="role" for="one">ONE</label>
    <input type="radio" name="role" value="TWO" id="two">
    <label …

我正在使用 React 开发一个电子应用程序，并且我必须按照下面的原型图像实现单选按钮。正如你所看到的，我想通过CSS更改单选按钮“圆”的背景颜色（颜色代码是rgba(255,252,229,1)）。我用谷歌搜索了这个问题，但找不到答案......

类似的问题是更改单选按钮中的边框和“选中”圆圈。

• 更改单选按钮的圆圈颜色
• 更改单选按钮的背景颜色

我尝试了下面的代码，但背景没有改变...（注意：我想实现的颜色代码是rgba(255,252,229,1)，但不清楚。所以，在这个问题中，我的颜色希望实施的是“绿色”。）

• background和background-color

.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    background-color: green;
}

==> 没有改变。

• accent-color

.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    accent-color: green;
}

===>“选中”圆圈，而不是背景圆圈，已更改

我想知道如何用css(标签$ style())改变"radioButton"和"checkboxInput"小部件的样式.

任何帮助表示赞赏!谢谢!

library(shiny)

ui <- shinyUI(fluidPage(
  h3("Hi! I would like to know how to change the style of these widgets with css (tag$style)"),
  h3("I can change the style of sliders, unfortunately I cannot figure out how to do this with 'radioButtons'
     and 'checkboxInput'. I usually inspect HTML-element in my browser and look for the css style, in this case this strategy does not work."),
  br(),
  br(),
  radioButtons(inputId = "ex_radio", label = "How to change my style?",
               choices = c("I …

是否可以通过CSS更改单选按钮的背景颜色？我在互联网上看过，但只在JS中找到解决方案，但不一定理解它们。我尝试了这个，但是没有用：

input[type="radio"]:checked {
  background-color: red;
}

<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal" checked="checked">
  <label for="soundsignal">Oui</label>
  <input type="radio" name="soundsignal">
  <label for="soundsignal">Non</label>
</div>

想要更改单选按钮的颜色：

但是，它似乎不起作用，仍然获得默认颜色：