使用CSS的gwt单选按钮样式

Question

我试图改变gwt单选按钮样式的风格并且无法成功。

是否可以直接更改gwt单选按钮样式？如果不，我还应该做些什么来改变它。

我在css中尝试输入[type =＆＃34; radio＆＃34;] {}，这没什么用。

谢谢， 贝内特。

Answer 1

根据我的想法，我根据你的问题做了一个样本，检查它是否符合你的需要

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

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

无需添加任何addStyleNames作为RadioButton由deafult监听.gwt-RadioButton css类。应用上述css后的结果是这样的，

编辑：

在您提供上述样本后，您非常清楚自己想要什么。 .gwt-RadioButton允许您设置RadioButton的样式。你想要的是在选择时为收音机圈和颜色设置样式。为此，您需要使用input[type=radio]修改label班级和RadioButton。

我们在这里做的是使用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;  
} 

Answer 2

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

你可以参考 how to override gwt default css