Подскажите, как изменить размер элемента "radiobutton" в стилях?

[osetr]

Когда меняю размер следующим образом, то все работает

<input type="radio" class="radioBtn" style="width:250px; height:250px;"name="sel" id="sel_adr">

Но когда так же делаю через стиль, то почему-то не работает. В чем может быть причина?

.radioBtn {    width: 250px;    height: 250px;}

<input type="radio" class="radioBtn" name="sel" id="sel_adr">

[rus]

в инспекторе кода посмотрите, возможно где-то перебивает другая запись в css

[osetr]

Что-то ни как не найду. Может в коде поможете найти.

Делаю приложение для смартфонов, по-этому использую @media. И не работает на смартфоне, где 1ый вариант @media. А на обычном мониторе (где @media 1024) все работает.

Стили:

.block1 {    width: 100%;     height: 100%;}.block2 {    width: 100%;     height: 100%;}@media only screen and (min-device-width: 320px) and (max-device-width: 359px){.block1 {     //padding: 5px;    float: center;    font-size: 100px;    background: #ffc;}.block2 {    font-size: 100px;    float: center;    height: 500px;        width: 1280px; }.radioBtn {    width: 250px;    height: 250px;}.selScl {    width : 750px;    height : 100px;    font-size : 50px;    background : #fff;}.inpName {    width : 600px;    height : 100px;    font-size : 70px;}.inpLun {    width : 150px;    height : 100px;    font-size : 70px;}.inp {    width : 750px;    height :100px;    font-size: 70px;}.sclAdr {    width : 600px;    height : 100px;    font-size : 70px;}.sclLun {    width : 150px;    height : 100px;    font-size : 70px;}.weightInput {    margin-top:40px;    width :400px;             height:150px;    background: #ffc;    font: 70px ArialBlack;    text-align :center;}    .weightBtn {    width :400px;             height: 150px;    background: #f92;    margin-top:30px;    font-size: 65px;}.informNb {    font-size:30px;}    select, .inp {    height : 100px;    font : 50px Arial;    background : #fff;}select:disabled, .inp:disabled {    background: #fff;}}@media only screen and (min-device-width: 360px){.block1 {     width: 360px;     height: 640px;    //padding: 5px;    float: center;  background: #ccc;  }}@media only screen and (min-device-width: 1024px){.block1 {     font-size: 100px;    width: 1280px;     height: 1024px;    //padding: 5px;    float: center;  background: #000;  }}

хтмл:

  '<div class="block1" align="center"'||	'<input type="hidden" name="p_sel" value="X">'||	'Список:'||  '<br></div>'||  '<div class="block2" align="center">'||  '<input type="radio" class="radioBtn" style="width:200px; height:200px;"name="sel" id="sel_name" checked>'||  '<input type="radio" class="radioBtn" style="width:100px; height:100px;"name="sel" id="sel_adr"></div>'||

[rus]

код в песочницу выкладывайте, там легче проверять.

[osetr]

http://jsfiddle.net/zLczfjz4/. Но здесь проблемы не видно, т.к. смотришь с монитора, проблема видна, когда смотришь со смартфона(другое разрешение экрана)

[rus]

как-то странно у вас:

@media only screen and (min-device-width: 320px) and (max-device-width: 359px){

и при этом в .block1:

    height: 500px;        width: 1280px; 

и так по всему коду...

а что за одинарные кавычки в html?

попробуйте вот так:

input.radioBtn[type="radio"] {    width:...;    height:...;}

[osetr]

ковычки, потому что пишу в pl/sql. Проблема решилась. Дело было в том, что на андроиде нельзя изменить размер radiobutton. В общем дело не в хтмл и не в стилях))