XF 1.5 Изменить внешний вид checkbox

[hofmann]

Здравствуйте. Как изменить внешний вид checkbox? Например что бы он сочетался с темным стилем?

<xen:if is="{$post.canInlineMod}"><input type="checkbox" name="posts[]" value="{$post.post_id}" class="InlineModCheck item" data-target="#post-{$post.post_id}" title="{xen:phrase select_this_post_by_x, 'name={$post.username}'}" /></xen:if>

Этот код отвечает за вывод чекбокса в сообщении для модерации. Может нужно его как то изменить?
Внести какие то css решение? Спасибо.

 

[Георгий Шевченко]

hofmann,

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[hofmann]

Например вот это добавляет чекбокс для модерации поверх стандартного.. Как оставить только от FontAwesome?

input[type=checkbox] {
     border: 0;
     clip: rect(0 0 0 0);
     padding: 0; 
     margin-right: 9px;
     outline: none;
     cursor: pointer;
}
input[type=checkbox]:before {
    color: #ccc;
    font-family: FontAwesome;
    content:"\f111";
    font-size: 25px;
    line-height: 50%;
}
input[type=checkbox]:checked:before {
   position: inherit;
    display: inline-block;
    color: #079600;
    font-family: FontAwesome;
    content: "\f14a";
    background: #fff;
    border-radius: 50%;
    line-height: 13px;
    vertical-align: 2px;
    margin-top: -1px;
}

 

[n0rt]

сейчас практически в любом браузере есть режим разработчика (пользуюсь Chrome там Ctrl+Shift+I) Можно навести на интересующий вас элемент, вызвать этот режим и попробовать отключить или поменять данные стили. Вы сразу увидите результат и если он вас устроит можно дальше менять в CSS

 

[hofmann]

сейчас практически в любом браузере есть режим разработчика (пользуюсь Chrome там Ctrl+Shift+I) Можно навести на интересующий вас элемент, вызвать этот режим и попробовать отключить или поменять данные стили. Вы сразу увидите результат и если он вас устроит можно дальше менять в CSS

Это понятно. У меня все работает, только нужно скрыть стандартные чекбоксы, а то закрыть их полностью FA чекбоксами не получается..
input[type=checkbox] { display: none; } - вроде бы то что нужно но убирает стандартный так и от FontAwesome.. ну понятно мы ж задаем по :before и :after.. в эту опцию.. не знаю..

 

[n0rt]

не совсем понимаю что нужно без самой страницы

но может быть как то так:

input[type=checkbox] { display: none; }
input[type=checkbox]:before
{ display: block; }

либо ещё может быть примерно так

input[type=checkbox]{
opacity: 0;
}

input[type=checkbox]:before
{ opacity: 1; }

либо вот ещё статья

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[hofmann]

n0rt, пробовал как вы написали - не помогло. не получается у меня заменить стандартные на FontAwesome.
только сама FA иконка идет поверх основной.. как на скрине.. margin-top: -1px; и т.п. не работает..
а даже если бы и зароботало то бы сползло в другом месте.. например опции темы, показывать онлайн статус, в настройках..
Просто там немножко в другом месте этот чекбокс..