라디오 버튼 CSS 스타일

나는, 바닥 패딩과 같은 뭔가? radiobuttons 잘 중심으로 보이지 않는 것 같습니다.라디오 버튼 CSS 스타일

편집 :이 계층은 라디오 버튼

이 여기에 시각적 모양

그리고 전체 CSS 클래스입니다 위해 부모를 보여주는 것입니다

/* 
Created on : 20-gen-2014, 18.18.13 
Author  : Alberto Pedroni <[email protected]> 
*/ 


.pane { 
/*-fx-background-color: linear-gradient(#f0f8ff, #b0c4de);*/ 
//-fx-background-color: linear-gradient(cornsilk, tan); 
/*-fx-background-radius: 5,4,3,5; 
-fx-background-insets: 4,4,4,4;*/ 

} 

.tab { 

/* -fx-background-color: red; */ 
/* -fx-border-color: gray; 
-fx-border-radius: 4; 
-fx-border-width: 1;*/ 

/* -fx-background-color: linear-gradient(rgb(109,109,109), rgb(70,70,70)); */ 

/* -fx-border-color: red; 
-fx-border-radius: 4; 
-fx-border-width: 1;*/ 

} 

.tab-label { 
-fx-font-size: 12px; 
-fx-font-weight: bold; 
-fx-text-fill: #333333; 
-fx-effect: dropshadow(gaussian , rgba(255,255,255,0.5) , 0,0,0,1); 
-fx-background-color: linear-gradient(aliceblue, lightslategray); 
} 

.label { 

-fx-font-family: "Arial"; 
-fx-font-size: 11; 
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/ 
-fx-text-fill: lightgoldenrodyellow; 
/* -fx-effect: dropshadow(one-pass-box , rgb(0, 0, 0, 0.6), 0, 0.0 , 0 , 1);*/ 

/* -fx-text-fill: lightyellow; 
-fx-font-size: 12px; 
-fx-font-weight: bold;*/ 
/* -fx-effect: innershadow(gaussian , rgba(255,255,255,0.5) , 0,0,0,1);*/ 
} 

.label > .tool-bar { 

-fx-font-family: "Arial"; 
-fx-font-size: 11; 
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/ 
-fx-text-fill: black; 
/* -fx-effect: dropshadow(one-pass-box , rgb(0, 0, 0, 0.6), 0, 0.0 , 0 , 1);*/ 

/* -fx-text-fill: lightyellow; 
-fx-font-size: 12px; 
-fx-font-weight: bold;*/ 
/* -fx-effect: innershadow(gaussian , rgba(255,255,255,0.5) , 0,0,0,1);*/ 
} 

.button .text { 
-fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.8), 0, 0.0 , 0 , -1); 
} 

.button { 
-fx-background-color: rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.8),#090a0c, 
    linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%), linear-gradient(#242a2e, #23282e), 
    radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9), rgba(255,255,255,0)); 
-fx-background-radius: 7, 6, 5, 4, 3, 5; 
/* -fx-background-insets: -3 -3 -4 -3, -3, 0, 1, 2, 0;*/ 
-fx-font-family: "Arial"; 
-fx-text-fill: white; 
-fx-font-size: 12; 
-fx-text-fill: linear-gradient(white, #d0d0d0); 
/* -fx-padding: 10 20 10 20;*/ 
} 

.button-plot { 
-fx-text-fill: red; 
} 

.button:focused, .button:hover { 
-fx-background-color: 
    rgba(255, 255, 255, 0.08), 
    rgba(0, 0, 0, 0.8), 
    #090a0c, 
    linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%), 
    linear-gradient(#3f4950, #23282e), 
    radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9), 
    rgba(255,255,255,0)); 
} 

.text-field, .text-area { 
-fx-font-size: 12; 
-fx-background-color: rgba(255, 255, 255, 0.3), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) 50%), rgb(218, 226, 224); 
-fx-background-insets: 0 0 -1 0, 0, 1.5; 
-fx-background-radius: 6, 5, 4; 
-fx-padding: 6 10 4 10; 
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.8), 5, 0, 0, 2); 
-fx-font-family: "Arial"; 
} 

.text-area { 
-fx-padding: 6 5 6 5; 
} 

.text-field:focused, .text-area:focused { 
-fx-background-color: 
    rgb(235, 235, 235), 
    rgb(0, 0, 0), 
    rgb(255, 255, 255); 
} 

.check-box { 
-fx-font-family: "Arial"; 
-fx-font-size: 11; 
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/ 
-fx-text-fill: lightgoldenrodyellow; 
-fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.6), 0, 0.0 , 0 , 1); 
} 

.combo-box, .choice-box { 
-fx-font-size: 11; 
-fx-background-color: rgba(255, 255, 255, 0.3), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) 50%), rgb(218, 226, 224); 
-fx-background-insets: 0 0 -1 0, 0, 1.5; 
-fx-background-radius: 6, 5, 4; 
/* -fx-padding: 6 10 4 10;*/ 
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.8), 5, 0, 0, 2); 
-fx-font-family: "Arial"; 
-fx-text-fill: black; 
} 

.radio-button { 
-fx-font-family: "Arial"; 
-fx-font-size: 11; 
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/ 
-fx-text-fill: lightgoldenrodyellow; 
/* -fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.6), 0, 0.0 , 0 , 1);*/ 

} 

.tool-bar{ 
-fx-background-color: linear-gradient(aliceblue, lightslategray); 
-fx-text-fill: black; 
} 

/*.titled-pane { 

}*/ 

.titled-pane:focused { 
-fx-text-fill: darkblue; 
} 

.titled-pane > .title { 

-fx-background-color: linear-gradient(aliceblue, lightslategray); 
-fx-background-insets: 0, 1, 2; 
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; 
-fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ 
} 

/*.titled-pane:focused > .title 
{ 
-fx-color: -fx-focus-color; 
}*/ 

/*.titled-pane > .title > .arrow-button 
{ 
-fx-background-color: null; 
-fx-background-insets: 0; 
-fx-background-radius: 0; 
-fx-padding: 0.0em 0.25em 0.0em 0.0em; 0 3 0 0 
}*/ 

/*.titled-pane > .title > .arrow-button .arrow 
{ 
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color; 
-fx-background-insets: 1 0 -1 0, 0; 
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; 3 3.75 3 3.75 
-fx-shape: "M 0 0 h 7 l -3.5 4 z"; 
}*/ 

/*.titled-pane:collapsed > .title > .arrow-button .arrow 
{ 
-fx-rotate: -90; 
}*/ 

.titled-pane > *.content { 
/* -fx-background-color: linear-gradient(rgb(87, 87, 87), rgb(27, 27, 27));*/ 
/* -fx-background-color: linear-gradient(from 0% 0% to 0% 100%, rgb(102, 102, 102) 0%, rgb(0, 0, 0) 21%, rgb(102, 102, 102) 47%, rgb(0, 0, 0) 99%, rgb(0, 0, 0) 100%);*/ 
/* -fx-background-color: linear-gradient(rgb(70,78,95), rgb(40, 40, 40));*/ 
-fx-background-image: url("file:///C:/Users/utente/Desktop/Java/NewProjectX/Backgrounds/CoarseGrid.png"); 
-fx-background-repeat: repeat; 
-fx-background-color: 
    linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%), 
    linear-gradient(#20262b, #191d22), 
    radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0)); 

/*-fx-background-color: 
-fx-box-border, 
linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border); 
-fx-background-insets: 0, 0 1 1 1; 
-fx-padding: 0.167em;*/ 
} 

    .top-segment { 
-fx-background-color: rgba(255, 255, 255, 0.05); 
-fx-border-color: 
    transparent transparent rgba(255, 255, 255, 0.08) transparent, 
    transparent transparent rgba(0, 0, 0, 0.5) transparent; 
-fx-border-width: 1, 1.5; 
-fx-border-insets: -1, 0; 
} 

/*.titled-pane:focused > .title > .arrow-button .arrow 
{ 
-fx-background-color: white; 
}*/ 

.split-pane:horizontal > * > .split-pane-divider { 
/* -fx-border-color: transparent; */ 
/* -fx-box-border: transparent #BBBBBB;*/ 
/* -fx-background-color: transparent, -fx-inner-border-horizontal;*/ 
/* -fx-background-color: grey;*/ 
-fx-border-width: 0.1; 
/* -fx-background-insets: 0, 0 1 0 1;*/ 
} 

.split-pane *.horizontal-grabber { 
-fx-padding: 0; 
-fx-background-color: transparent; 
-fx-background-insets: 0; 
-fx-shape: " "; 
}

출처

2014-03-12 Alberto acepsut

이미지에 라디오 버튼이 중복 된 것처럼 보입니다 ... 이와 관련된 HTML을 포함시킬 수 있습니까? 그렇지 않으면'vertical-align' 속성을 사용하여 라디오 버튼의 위치를 조정할 수 있습니다. – Ted

문제를 볼 수있는 곳에 jsfiddle을 제공해주십시오. 그리고 입력과 관련된 모든 CSS를 추가하십시오. – DonJuwe

포스트 어떻게 이러한 라디오 버튼을 장면에 추가하고 있습니까? 부모는 무엇입니까? –

.radio-button .radio { 
    -fx-background-insets: 0; 
}

이 당신을 도울 수 있습니다.

출처

2016-06-09 07:37:21 Rogutin

그건 실제로 @Rogutin 문제를 해결합니다. '.radio { -fx-background-insets : 0; }'로 충분해야합니다. CSS에서 자신 만의 스타일을 정의하는 것을 제외하고는 내부 노드에 액세스 할 수 없습니다. '.radio'는 "버튼"자체에 적용됩니다. 나는 똑같은 문제가 있었고 이타치누야는 나를 도왔다. – motaa

내 앞 코멘트에 편집 : "setStyle()을 통해 내부 노드에 접근 할 수 없다" – motaa

라디오 버튼 CSS 스타일

답변

관련 문제