使用 css 的 gwt 单选按钮样式答案

【问题标题】：gwt radio button style using css使用 css 的 gwt 单选按钮样式
【发布时间】：2013-12-25 02:46:04
【问题描述】：

我尝试更改gwt单选按钮样式的样式，但没有成功。

是否可以直接更改gwt单选按钮样式？如果没有，我应该怎么做才能改变它。

我在 css 中尝试了 input[type="radio"]{ }，但这没有帮助。

谢谢，班纳特。

【问题讨论】：

我认为输入单选是无法设置样式的元素之一...
但是，我们必须能够通过在 UiBinders 中使用 input 元素来解决这个问题，对吧？我试图这样做。即使那样它也不起作用。可能是什么原因。我在 Uibinders 本身和 css 中添加了样式，但没有用，它根本没有改变。我这边可能出了什么问题。
@Bennet 你所说的“改变 gwt 单选按钮的样式”到底是什么意思？具体的改变是什么？
@Bennet 检查我的回答是否符合您的需要..

标签： css gwt uibinder gwtp

【解决方案1】：

从你的问题我认为我做了一个样品，检查它是否适合你的需要

将以下 css 类添加到您的应用程序 css

.gwt-RadioButton {
background-color: grey;
border: 1px solid #FFFF00;
margin: 10px;
font-size: 2em;
}

不需要添加任何addStyleNames，因为RadioButton by deafult 会监听.gwt-RadioButton css 类。应用上面的css后的结果是这样的，

编辑：

在您提供上述示例后，您就很清楚您想要什么了。 .gwt-RadioButton 允许您设置RadioButton 的样式。您想要的是设置单选圆圈的样式和选择它时的颜色。为此，您需要使用RadioButton 修改input[type=radio] 类和label。

我们在这里所做的是使用 display none 禁用默认单选圈，并将我们自己的添加为 label:before 内容，然后对其进行样式设置。希望这能解决您的问题。您需要添加一些样式，然后根据自己的需要进行调整，如下所示。

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
}

input[type=radio] {  
    display: none;  
}

label:before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #282E5A;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
.gwt-RadioButton label:before {  
    border-radius: 8px;  
}
input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: aqua;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}

【讨论】：

我的问题需要类似的东西。应该可以，但是不知道怎么做。请帮帮我。
@Bennet 检查修改后的答案。
好答案真的很好。

【解决方案2】：

您需要覆盖 gwt-RadioButton Css。为此，您需要使用 CSSResource 定义一个 ClientBundle 并将其注入到您的模块加载中。

你可以参考 how to override gwt default css

【讨论】：