+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] [Tutorial] Select Style Arrow Font Awesome 5 icons (/thread-221903.html)
[Tutorial] Select Style Arrow Font Awesome 5 icons - Anka06 - 2019-02-11
[Back up before doing ]Admin Cp - Themes & Styles - Global.css Select Find
replace with
select {
padding: 4px;
margin: 0;
background: #FFF;
border: 1px solid #ddd;
color: #333;
outline: none;
font-size: 13px;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
width: 200px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.select-wrap {
position: relative;
}
.select-wrap:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f107';
font-size: 15px;
position: absolute;
top: -2px;
right: 10px;
color: #c6c4c4;
pointer-events: none;
}forumdisplay_threadlist Find - replace with
<td class="tfoot" align="right" colspan="{$colspan}">
<form action="forumdisplay.php" method="get">
<input type="hidden" name="fid" value="{$fid}" />
<span class="select-wrap">
<select name="sortby">
<option value="subject"{$sortsel['subject']}>{$lang->sort_by_subject}</option>
<option value="lastpost"{$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
<option value="starter"{$sortsel['starter']}>{$lang->sort_by_starter}</option>
<option value="started"{$sortsel['started']}>{$lang->sort_by_started}</option>
{$ratingsort}
<option value="replies"{$sortsel['replies']}>{$lang->sort_by_replies}</option>
<option value="views"{$sortsel['views']}>{$lang->sort_by_views}</option>
</select></span>
<span class="select-wrap">
<select name="order">
<option value="asc"{$ordersel['asc']}>{$lang->sort_order_asc}</option>
<option value="desc"{$ordersel['desc']}>{$lang->sort_order_desc}</option>
</select></span><span class="select-wrap">
<select name="datecut">
<option value="1"{$datecutsel['1']}>{$lang->datelimit_1day}</option>
<option value="5"{$datecutsel['5']}>{$lang->datelimit_5days}</option>
<option value="10"{$datecutsel['10']}>{$lang->datelimit_10days}</option>
<option value="20"{$datecutsel['20']}>{$lang->datelimit_20days}</option>
<option value="50"{$datecutsel['50']}>{$lang->datelimit_50days}</option>
<option value="75"{$datecutsel['75']}>{$lang->datelimit_75days}</option>
<option value="100"{$datecutsel['100']}>{$lang->datelimit_100days}</option>
<option value="365"{$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
<option value="9999"{$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
</select></span>
{$prefixselect}
{$gobutton}
</form>
</td>forumdisplay_inlinemoderation Find - replace with
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="fid" value="{$fid}" />
<input type="hidden" name="modtype" value="inlinethread" />
<span class="smalltext"><strong>{$lang->inline_thread_moderation}</strong></span>
<span class="select-wrap">
<select name="action">
<option value="delayedmoderation">{$lang->delayed_moderation}</option>
{$standardthreadtools}
{$customthreadtools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->inline_go} ({$inlinecount})" id="inline_go" />
<input type="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" class="button" />
</form>
<script type="text/javascript">
<!--
var go_text = "{$lang->inline_go}";
var all_text = "{$threadcount}";
var inlineType = "forum";
var inlineId = {$fid};
// -->
</script>
<br />showthread_inlinemoderation Find - replace with
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;" id="inlinemoderation_options">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="tid" value="{$tid}" />
<input type="hidden" name="modtype" value="inlinepost" />
<span class="smalltext"><strong>{$lang->inline_post_moderation}</strong></span>
<span class="select-wrap">
<select name="action" id="inlinemoderation_options_selector">
{$standardposttools}
{$customposttools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->go} ({$inlinecount})" id="inline_go" />
<input type="button" class="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" />
</form>
<script type="text/javascript">
<!--
var go_text = "{$lang->inline_go}";
var all_text = "{$threadcount}";
var inlineType = "thread";
var inlineId = {$tid};
$("#inlinemoderation_options_selector").change(function() {
$("#inlinemoderation_options").submit();
})
// -->
</script><br />showthread_moderationoptions Find - replace with
{$inlinemod}
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;" id="moderator_options">
<input type="hidden" name="modtype" value="thread" />
<input type="hidden" name="tid" value="{$tid}" />
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<span class="smalltext">
<strong>{$lang->moderation_options}</strong></span>
<span class="select-wrap">
<select name="action" id="moderator_options_selector">
<option value="delayedmoderation">{$lang->delayed_moderation}</option>
{$standardthreadtools}
{$customthreadtools}
</select></span>
{$gobutton}
</form>
<br />
<script type="text/javascript">
<!--
$("#moderator_options_selector").change(function() {
$("#moderator_options").submit();
})
//-->
</script>forumjump_advanced Find - replace with
<form action="forumdisplay.php" method="get">
<span class="smalltext"><strong>{$lang->forumjump}</strong></span>
<span class="select-wrap">
<select name="{$name}" class="forumjump">
<option value="-4">{$lang->forumjump_pms}</option>
<option value="-3">{$lang->forumjump_usercp}</option>
<option value="-5">{$lang->forumjump_wol}</option>
<option value="-2">{$lang->forumjump_search}</option>
<option value="-1">{$lang->forumjump_home}</option>
{$forumjumpbits}
</select></span>
{$gobutton}
</form>
<script type="text/javascript">
$(".forumjump").change(function() {
var option = $(this).val();
if(option < 0)
{
window.location = 'forumdisplay.php?fid='+option;
}
else
{
window.location = {$forum_link};
}
});
</script>memberlist Find
<select name="sort" id="sort" style="width: 99%;">
<option value="username"{$sort_selected['username']}>{$lang->sort_by_username}</option>
<option value="regdate"{$sort_selected['regdate']}>{$lang->sort_by_regdate}</option>
<option value="lastvisit"{$sort_selected['lastvisit']}>{$lang->sort_by_lastvisit}</option>
<option value="postnum"{$sort_selected['postnum']}>{$lang->sort_by_posts}</option>
<option value="threadnum"{$sort_selected['threadnum']}>{$lang->sort_by_threads}</option>
{$referrals_option}
</select>replace with
<span class="select-wrap">
<select name="sort" id="sort" style="width: 99%;">
<option value="username"{$sort_selected['username']}>{$lang->sort_by_username}</option>
<option value="regdate"{$sort_selected['regdate']}>{$lang->sort_by_regdate}</option>
<option value="lastvisit"{$sort_selected['lastvisit']}>{$lang->sort_by_lastvisit}</option>
<option value="postnum"{$sort_selected['postnum']}>{$lang->sort_by_posts}</option>
<option value="threadnum"{$sort_selected['threadnum']}>{$lang->sort_by_threads}</option>
{$referrals_option}
</select></span>Search Find
<select name="findthreadst">
<option value="1">{$lang->threads_at_least}</option>
<option value="2">{$lang->threads_at_most}</option>
</select> <input type="text" class="textbox" name="numreplies" size="2" maxlength="4" /> {$lang->replies2}<br />
<br />
<select name="postdate">
<option value="0">{$lang->find_anydate}</option>
<option value="1">{$lang->find_yesterday}</option>
<option value="7">{$lang->find_lastweek}</option>
<option value="14">{$lang->find_2weeks}</option>
<option value="30">{$lang->find_month}</option>
<option value="90">{$lang->find_3months}</option>
<option value="180">{$lang->find_6months}</option>
<option value="365">{$lang->find_year}</option>
</select> <input type="radio" class="radio" name="pddir" value="1" checked="checked" />{$lang->and_newer} <input type="radio" class="radio" name="pddir" value="0" />{$lang->and_older}<br />
<br />
{$prefixselect}
</td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->sorting_options}</strong></td>
</tr>
<tr>
<td class="trow1">
<select name="sortby">
<option value="lastpost">{$lang->sort_lastpost}</option>
<option value="starter">{$lang->sort_author}</option>
<option value="forum">{$lang->sort_forum}</option>
</select> replace with
<span class="select-wrap">
<select name="findthreadst">
<option value="1">{$lang->threads_at_least}</option>
<option value="2">{$lang->threads_at_most}</option>
</select> </span> <input type="text" class="textbox" name="numreplies" size="2" maxlength="4" /> {$lang->replies2}<br />
<br /><span class="select-wrap">
<select name="postdate">
<option value="0">{$lang->find_anydate}</option>
<option value="1">{$lang->find_yesterday}</option>
<option value="7">{$lang->find_lastweek}</option>
<option value="14">{$lang->find_2weeks}</option>
<option value="30">{$lang->find_month}</option>
<option value="90">{$lang->find_3months}</option>
<option value="180">{$lang->find_6months}</option>
<option value="365">{$lang->find_year}</option>
</select></span> <input type="radio" class="radio" name="pddir" value="1" checked="checked" />{$lang->and_newer} <input type="radio" class="radio" name="pddir" value="0" />{$lang->and_older}<br />
<br />
{$prefixselect}
</td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->sorting_options}</strong></td>
</tr>
<tr>
<td class="trow1">
<span class="select-wrap">
<select name="sortby">
<option value="lastpost">{$lang->sort_lastpost}</option>
<option value="starter">{$lang->sort_author}</option>
<option value="forum">{$lang->sort_forum}</option>
</select> </span>search_results_posts_inlinemoderation Find - replace with
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="tid" value="0" />
<input type="hidden" name="searchid" value="{$sid}" />
<input type="hidden" name="modtype" value="inlinepost" />
<span class="smalltext"><strong>{$lang->inline_post_moderation}</strong></span>
<span class="select-wrap">
<select name="action">
<optgroup label="{$lang->standard_mod_tools}">
<option value="multisoftdeleteposts">{$lang->inline_soft_delete_posts}</option>
<option value="multirestoreposts">{$lang->inline_restore_posts}</option>
<option value="multideleteposts">{$lang->inline_delete_posts}</option>
<option value="multimergeposts">{$lang->inline_merge_posts}</option>
<option value="multisplitposts">{$lang->inline_split_posts}</option>
<option value="multimoveposts">{$lang->inline_move_posts}</option>
<option value="multiapproveposts">{$lang->inline_approve_posts}</option>
<option value="multiunapproveposts">{$lang->inline_unapprove_posts}</option>
</optgroup>
{$customposttools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->go} ({$inlinecount})" id="inline_go" />
<input type="button" class="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" />
<input type="hidden" name="url" value="{$return_url}" />
<input type="hidden" name="inlinetype" value="search" />
</form>
<script type="text/javascript">
<!--
var go_text = "{$lang->inline_go}";
var all_text = "{$postcount}";
var inlineType = "search";
var inlineId = "{$sid}";
// -->
</script><br />search_results_threads_inlinemoderation Find - replace with
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="fid" value="0" />
<input type="hidden" name="searchid" value="{$sid}" />
<input type="hidden" name="modtype" value="inlinethread" />
<span class="smalltext"><strong>{$lang->inline_thread_moderation}</strong></span>
<span class="select-wrap">
<select name="action">
<optgroup label="{$lang->standard_mod_tools}">
<option value="multiclosethreads">{$lang->close_threads}</option>
<option value="multiopenthreads">{$lang->open_threads}</option>
<option value="multistickthreads">{$lang->stick_threads}</option>
<option value="multiunstickthreads">{$lang->unstick_threads}</option>
<option value="multisoftdeletethreads">{$lang->soft_delete_threads}</option>
<option value="multirestorethreads">{$lang->restore_threads}</option>
<option value="multideletethreads">{$lang->delete_threads}</option>
<option value="multimovethreads">{$lang->move_threads}</option>
<option value="multiapprovethreads">{$lang->approve_threads}</option>
<option value="multiunapprovethreads">{$lang->unapprove_threads}</option>
</optgroup>
{$customthreadtools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->inline_go} ({$inlinecount})" id="inline_go" />
<input type="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" class="button" />
<input type="hidden" name="url" value="{$return_url}" />
<input type="hidden" name="inlinetype" value="search" />
</form>
<script type="text/javascript">
<!--
var go_text = "{$lang->inline_go}";
var all_text = "{$threadcount}";
var inlineType = "search";
var inlineId = '{$sid}';
// -->
</script>
<br />search_moderator_options Find - replace with
<tr>
<td class="tcat"><strong>{$lang->mod_options}</strong></td>
</tr>
<tr>
<td class="trow1" valign="top">
<span class="select-wrap">
<select name="visible">
<option value="">{$lang->display_all}</option>
<option value="1">{$lang->display_only_approved}</option>
<option value="0">{$lang->display_only_unapproved}</option>
<option value="-1">{$lang->display_only_softdeleted}</option>
</select> </span>{$lang->results}
</td>
</tr>footer_themeselector Find - replace with
<span class="select-wrap">
<select name="{$name}" onchange="MyBB.changeTheme();">
<optgroup label="{$lang->select_theme}">
{$themeselect_option}
</optgroup>
</select></span>footer_languageselect Find - replace with
<div class="language">
<form method="POST" action="{$lang_redirect_url['location']}" id="lang_select">
{$lang_redirect_url['form_html']}
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<span class="select-wrap">
<select name="language" onchange="MyBB.changeLanguage();">
<optgroup label="{$lang->select_language}">
{$lang_options}
</optgroup>
</select></span>
{$gobutton}
</form>
</div>usercp_options Find - replace with
<span class="select-wrap">
<select name="subscriptionmethod" id="subscriptionmethod">
<option value="0" {$no_auto_subscribe_selected}>{$lang->no_auto_subscribe}</option>
<option value="1" {$no_subscribe_selected}>{$lang->no_subscribe}</option>
<option value="2" {$instant_email_subscribe_selected}>{$lang->instant_email_subscribe}</option>
<option value="3" {$instant_pm_subscribe_selected}>{$lang->instant_pm_subscribe}</option>
</select></span>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset class="trow2">
<legend><strong>{$lang->date_time_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
<tr>
<td><span class="smalltext">{$lang->date_format}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">
<select name="dateformat">
<option value="0">{$lang->use_default}</option>
{$date_format_options}
</select></span>
</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->time_format}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">
<select name="timeformat">
<option value="0">{$lang->use_default}</option>
{$time_format_options}
</select></span>
</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->time_offset_desc}</span></td>
</tr>
<tr>
<td>{$tzselect}</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->dst_correction}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">
<select name="dstcorrection">
<option value="2" {$dst_auto_selected}>{$lang->dst_correction_auto}</option>
<option value="1" {$dst_enabled_selected}>{$lang->dst_correction_enabled}</option>
<option value="0" {$dst_disabled_selected}>{$lang->dst_correction_disabled}</option>
</select></span>
</td>
</tr>
</table>
</fieldset>
</td>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->forum_display_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
{$tppselect}
<tr>
<td><span class="smalltext">{$lang->thread_view}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">
<select name="daysprune">
<option value="">{$lang->use_default}</option>
<option value="1" {$daysprunesel['1']}>{$lang->thread_view_lastday}</option>
<option value="5" {$daysprunesel['5']}>{$lang->thread_view_5days}</option>
<option value="10" {$daysprunesel['10']}>{$lang->thread_view_10days}</option>
<option value="20" {$daysprunesel['20']}>{$lang->thread_view_20days}</option>
<option value="50" {$daysprunesel['50']}>{$lang->thread_view_50days}</option>
<option value="75" {$daysprunesel['75']}>{$lang->thread_view_75days}</option>
<option value="100" {$daysprunesel['100']}>{$lang->thread_view_100days}</option>
<option value="365" {$daysprunesel['365']}>{$lang->thread_view_year}</option>
<option value="9999" {$daysprunesel['9999']}>{$lang->thread_view_all}</option>
</select></span>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset class="trow2">
<legend><strong>{$lang->thread_view_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="classicpostbit" id="classicpostbit" value="1" {$classicpostbitcheck} /></td>
<td><span class="smalltext"><label for="classicpostbit">{$lang->show_classic_postbit}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showimages" id="showimages" value="1" {$showimagescheck} /></td>
<td><span class="smalltext"><label for="showimages">{$lang->show_images}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showvideos" id="showvideos" value="1" {$showvideoscheck} /></td>
<td><span class="smalltext"><label for="showvideos">{$lang->show_videos}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showsigs" id="showsigs" value="1" {$showsigscheck} /></td>
<td><span class="smalltext"><label for="showsigs">{$lang->show_sigs}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showavatars" id="showavatars" value="1" {$showavatarscheck} /></td>
<td><span class="smalltext"><label for="showavatars">{$lang->show_avatars}</label></span></td>
</tr>
{$quick_reply}
{$pppselect}
<tr>
<td colspan="2"><span class="smalltext">{$lang->thread_mode}</span></td>
</tr>
<tr>
<td colspan="2"><span class="select-wrap"><select name="threadmode"><option value="">{$lang->use_default}</option><option value="linear" {$threadview['linear']}>{$lang->linear}</option><option value="threaded" {$threadview['threaded']}>{$lang->threaded}</option></select></span>usercp_options_tppselect Find - replace with
<tr>
<td colspan="2"><span class="smalltext">{$lang->tpp}</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">
<select name="tpp">
<option value="">{$lang->use_default}</option>
{$tppoptions}
</select></span>
</td>
</tr>usercp_options_language Find - replace with
<tr>
<td colspan="2"><span class="smalltext">{$lang->board_language}:</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">
<select name="language">
<option value="">{$lang->use_default}</option>
<option value="0">-----------</option>
{$langoptions}
</select></span>
</td>
</tr>usercp_options_pppselect Find - replace with
<tr>
<td colspan="2"><span class="smalltext">{$lang->ppp}</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">
<select name="ppp">
<option value="">{$lang->use_default}</option>
{$pppoptions}
</select></span>
</td>
</tr>usercp_options_timezone Find - replace with
<span class="select-wrap">
<select name="{$name}" id="{$name}">
{$timezone_option}
</select></span>usercp_profile_away Find - replace with
<span class="select-wrap">
<select style="width:100px;" name="awayday">
<option value=""> </option>
{$returndatesel}
</select></span>
</td>
<td>
<span class="select-wrap">
<select style="width:100px;" name="awaymonth">
<option value=""> </option>
<option value="1" {$returndatemonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$returndatemonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$returndatemonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$returndatemonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$returndatemonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$returndatemonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$returndatemonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$returndatemonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$returndatemonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$returndatemonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$returndatemonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$returndatemonthsel['12']}>{$lang->month_12}</option>
</select></span>usercp_profile Find - replace with
<span class="select-wrap">
<select name="bday1">
<option value=""> </option>
{$bdaydaysel}
</select></span>
</td>
<td>
<span class="select-wrap">
<select name="bday2">
<option value=""> </option>
<option value="1" {$bdaymonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$bdaymonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$bdaymonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$bdaymonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$bdaymonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$bdaymonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$bdaymonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$bdaymonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$bdaymonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$bdaymonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$bdaymonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$bdaymonthsel['12']}>{$lang->month_12}</option>
</select></span>
</td>
<td>
<input type="text" class="textbox" size="4" maxlength="4" name="bday3" value="{$bday['2']}" />
</td>
</tr>
<tr>
<td colspan="3">
<span class="smalltext">{$lang->birthdayprivacy}</span>
</td>
</tr>
<tr>
<td colspan="3">
<span class="select-wrap">
<select name="birthdayprivacy">
<option value="all"{$allselected}>{$lang->birthdayprivacyall}</option>
<option value="none"{$noneselected}>{$lang->birthdayprivacynone}</option>
<option value="age"{$ageselected}>{$lang->birthdayprivacyage}</option>
</select></span>usercp_profile_profilefields_multiselect Find - replace with
<span class="select-wrap">
<select name="profile_fields[$field][]" size="{$profilefield['length']}" multiple="multiple">
{$select}
</select></span>usercp_profile_profilefields_select Find - replace with
<span class="select-wrap">
<select name="profile_fields[$field]" size="{$profilefield['length']}">
{$select}
</select></span>usercp_themeselector Find - replace with
<span class="select-wrap">
<select name="{$name}">
<option value="0">{$lang->use_default}</option>
<option value="0">-----------</option>
{$themeselect_option}
</select></span>calendar Find - replace with
<span class="select-wrap">
<select style="width:100px;" name="month">
<option value="{$month}">{$monthnames[$month]}</option>
<option value="{$month}">----------</option>
<option value="1">{$lang->alt_month_1}</option>
<option value="2">{$lang->alt_month_2}</option>
<option value="3">{$lang->alt_month_3}</option>
<option value="4">{$lang->alt_month_4}</option>
<option value="5">{$lang->alt_month_5}</option>
<option value="6">{$lang->alt_month_6}</option>
<option value="7">{$lang->alt_month_7}</option>
<option value="8">{$lang->alt_month_8}</option>
<option value="9">{$lang->alt_month_9}</option>
<option value="10">{$lang->alt_month_10}</option>
<option value="11">{$lang->alt_month_11}</option>
<option value="12">{$lang->alt_month_12}</option>
</select></span><span class="select-wrap">
<select style="width:100px;" name="year">
<option value="{$year}">{$year}</option>
<option value="{$year}">----------</option>
{$yearsel}
</select></span>private_advanced_search Find - replace with
<span class="select-wrap">
<select name="sort" id="sort">
<option value="subject">{$lang->sort_by_subject}</option>
<option value="sender">{$lang->sort_by_sender}</option>
<option value="dateline" selected="selected">{$lang->sort_by_date}</option>
</select></span>private_advanced_search_folders Find - replace with
<span class="select-wrap">
<select multiple="multiple" name="folder[]" id="folder">
<option selected="selected">{$lang->all_folders}</option>
{$foldersearch_folder}
</select></span>private_archive_folders Find - replace with
<span class="select-wrap">
<select name="exportfolders[]" multiple="multiple">
<option value="all" selected="selected">{$lang->all_folders}</option>
{$folderlist_folder}
</select></span>private_jump_folders Find - replace with
<span class="select-wrap">
<select name="jumpto">
{$folderjump_folder}
</select></span>private_move Find - replace with
<input type="hidden" value="{$from_fid}" name="fromfid" />
<span class="select-wrap">
<select name="fid">
{$folderoplist_folder}
</select></span>modcp_modlogs Find - replace with
<span class="select-wrap">
<select name="uid">
<option value="">{$lang->all_moderators}</option>
<option value="">----------</option>
{$user_options}
</select></span>
</td>
</tr>
<tr>
<td class="trow1" width="25%"><strong>{$lang->sort_by}</strong></td>
<td class="trow1" width="75%">
<span class="select-wrap">
<select name="sortby">
<option value="dateline"{$sortbysel['dateline']}>{$lang->date}</option>
<option value="username"{$sortbysel['username']}>{$lang->username}</option>
<option value="forum"{$sortbysel['forum']}>{$lang->forum_name}</option>
<option value="thread"{$sortbysel['thread']}>{$lang->thread_subject}</option>
</select></span>
{$lang->in}
<span class="select-wrap">
<select name="order">
<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
</select></span>modcp_warninglogs Find - replace with
<span class="select-wrap">
<select name="filter[sortby]">
<option value="username"{$sortbysel['username']}>{$lang->username}</option>
<option value="issuedby"{$sortbysel['issuedby']}>{$lang->issued_by}</option>
<option value="dateline"{$sortbysel['dateline']}>{$lang->issued_date}</option>
<option value="expires"{$sortbysel['expires']}>{$lang->expiry_date}</option>
</select></span>
{$lang->in}
<span class="select-wrap">
<select name="filter[order]">
<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
</select></span>modcp_announcements_edit Find - replace with
<span class="select-wrap">
<select name="starttime_day">
{$startdateday}
</select></span>
<span class="select-wrap">
<select name="starttime_month">
{$startdatemonth}
</select></span>
<input type="text" name="starttime_year" value="{$startdateyear}" size="4" maxlength="4" class="textbox" />
- {$lang->time} <input type="text" name="starttime_time" value="{$starttime_time}" size="10" class="textbox" />
</td>
</tr>
<tr>
<td class="trow1" colspan="1" valign="top" width="25%"><strong>{$lang->end_date}</strong></td>
<td class="trow1" valign="top" width="75%">
<input type="radio" name="endtime_type" value="1"{$end_type_sel['finite']} />
<span class="select-wrap">
<select name="endtime_day">
{$enddateday}
</select></span>
<span class="select-wrap">
<select name="endtime_month">
{$enddatemonth}
</select></span>modcp_announcements_new Find - replace with
<span class="select-wrap">
<select name="starttime_day">
{$startdateday}
</select></span>
<span class="select-wrap">
<select name="starttime_month">
{$startdatemonth}
</select></span>
<input type="text" name="starttime_year" value="{$startdateyear}" size="4" maxlength="4" class="textbox" />
- {$lang->time} <input type="text" name="starttime_time" value="{$starttime_time}" size="10" class="textbox" />
</td>
</tr>
<tr>
<td class="trow1" colspan="1" valign="top" width="25%"><strong>{$lang->end_date}</strong></td>
<td class="trow1" valign="top" width="75%">
<input type="radio" name="endtime_type" value="1"{$end_type_sel['finite']} />
<span class="select-wrap">
<select name="endtime_day">
{$enddateday}
</select></span>
<span class="select-wrap">
<select name="endtime_month">
{$enddatemonth}
</select></span>modcp_editprofile_select Find - replace with
<span class="select-wrap">
<select name="{$select_name}">
{$selection_options}
</select></span>modcp_finduser Find - replace with
<span class="select-wrap">
<select name="sortby">
<option value="username"{$sortbysel['username']}>{$lang->username}</option>
<option value="regdate"{$sortbysel['regdate']}>{$lang->regdate}</option>
<option value="lastvisit"{$sortbysel['lastvisit']}>{$lang->lastvisit}</option>
<option value="postnum"{$sortbysel['postnum']}>{$lang->postnum}</option>
</select></span>
{$lang->in}
<span class="select-wrap">
<select name="order">
<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
</select></span>modcp_editprofile_select Find - replace with
<span class="select-wrap">
<select name="{$select_name}">
{$selection_options}
</select></span>modcp_editprofile_away Find - replace with
</select></span>
</td>
<td>
<span class="select-wrap">
<select name="awaymonth">
<option value=""> </option>
<option value="1" {$returndatemonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$returndatemonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$returndatemonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$returndatemonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$returndatemonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$returndatemonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$returndatemonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$returndatemonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$returndatemonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$returndatemonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$returndatemonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$returndatemonthsel['12']}>{$lang->month_12}</option>
</select></span>modcp_editprofile Find - replace with
<span class="select-wrap">
<select name="birthday_day">
<option value=""> </option>
{$bdaydaysel}
</select></span>
</td>
<td>
<span class="select-wrap">
<select name="birthday_month">
<option value=""> </option>
<option value="1" {$bdaymonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$bdaymonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$bdaymonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$bdaymonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$bdaymonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$bdaymonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$bdaymonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$bdaymonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$bdaymonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$bdaymonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$bdaymonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$bdaymonthsel['12']}>{$lang->month_12}</option>
</select></span>finally over
feel happy while using it
Font Awesome 5 icons Select Style Arrow
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - Eldenroot - 2019-02-13
Great, thank you! So many code changes :-o
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - effone - 2019-02-13
Sorry, but what does it do?
If its about using custom arrow for select element then this can hide native arrow of select:
select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
Then a simple
:after pseudo can implement the custom arrow... GLOBALLYor even if we follow your approach then despite of editing all the templates for select a one line jQuery can wrap all the select elements with the custom class, as you need.
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - fishntassie - 2019-02-14
Have to agree with @effone whilst thanks for the tut and i can see some benefits of doing it this way in terms of other customisation there are some negatives in terms of any changes that come in during updates and with plugins etc. for a change that is only to the appearance of the select drop down arrow.
interesting though option though as it would allow for much more customisation of the select menus and useful from that point of view in a project i am working on now thanks for the effort
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - Eldenroot - 2019-02-15
I cannot make it working with :after element
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - Anka06 - 2019-02-15
(2019-02-15, 09:24 AM)Eldenroot Wrote: I cannot make it working with :after element
corrected :before
Works seamlessly with Mozilla and other browsers
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - Eldenroot - 2019-02-15
CSS complete code for this :before method? Thank you Anka06!
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - terzier - 2019-02-20
is there a demo?
RE: [Tutorial] Select Style Arrow Font Awesome 5 icons - effone - 2019-02-20
https://codepen.io/surfbird/pen/azeaam