Nano Hash - криптовалюты, майнинг, программирование

как изменить стиль радиокнопок в h: selectOneRadio

у меня есть h:selectOneRadio следующим образом:

<div id="container" class="container">
<h:selectOneRadio layout="pageDirection" id="sel_radio" value="#{mBean.selectedRadio}">  
   <f:selectItem id="option1" itemLabel="item1" itemValue="1" />  
   <f:selectItem id="option2" itemLabel="item2" itemValue="2" />            
</h:selectOneRadio>
.
.
.
</div>

выше будет отображаться следующим образом:

<div id="container" class="container">
<table>
  <tbody>
    <tr>
      <td>
        <input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

ПРОБЛЕМА: класс контейнера задает ширину по умолчанию для всех входных данных, которые повлияют на мой переключатель, вот класс css:

.container input {
width: 200px;
}

и я не могу изменить этот класс, потому что это шаблон и используется на других страницах, я хочу переопределить этот стиль только на этой странице.

я попытался переопределить его, добавив следующий стиль:

.container #myForm:sel_radio:0 {
  width: 50px !important;
}

но это тоже не работает.

подскажите как исправить, спасибо.

css jsf jsf-2
04.10.2012

Ответы:


1

надеюсь, это поможет

<input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

вы должны поставить обратную косую черту, как это

.container  #myForm\:sel_radio\:0{
width:100px!important;
}
04.10.2012
  • @MahmoudSaleh Как я уже сказал в своем ответе, я не уверен, есть ли у IE7 эта проблема, но почему бы не поддерживать все браузеры, если это просто добавить еще 2 символа? 04.10.2012
  • Не работайте в IE6/7. См. также stackoverflow.com/questions/5878692/ 04.10.2012

    • 2

    Вам лучше указать тип элемента, а не идентификатор элемента:

    .container input[type=radio] {
    width: 50px !important;
}

    Или присвойте ему класс стиля, такой как <h:selectOneRadio styleClass="myradio">, с помощью этого CSS:

    .container .myradio input {
    width: 50px !important;
}
    04.10.2012

    3

    Избегайте двоеточий с помощью \3A (шестнадцатеричный код обратной косой черты), поскольку двоеточие — это специальный символ в CSS, или вы можете определить новый стиль:

     #myForm .container input { 
   width: 50px;
 }

    Экранирование двоеточий с обратной косой чертой напрямую \ не работает в IE6, и я не уверен, что и в IE7. Также избегайте использования !important, если это возможно. Это может вызвать головную боль, если вы попытаетесь изменить свой стиль через некоторое время, и вы забыли об этом.

    04.10.2012
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..