MyBB Community Forums

Full Version: HTML - Displaying custom dropdown arrow?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I've created a new select style on my forums for use in certain pages, while this works fine I'm struggling to get the dropdown arrow to show. I'm trying to display an arrow from a font (font loads and is fine, issue is how I'm trying to get it working)

Dropdown CSS - 

/** dropdown styling **/
.selectadmin {
  box-sizing: border-box;
  color: #666;
  background: #fff;
  height: 30px;
  box-shadow: inset 0 -5px 7px rgba(0, 0, 0, 0.08);
  border: 1px solid #d8d8d8;
  border-radius: 5px;	
}
/** dropdown arrow **/
.selectadmin:before {
 font-family: 'WebSymbolsRegular';
content: ';';
  position: absolute;
  right: 9px;
  top: 0;
  line-height: 235%;
  height: 100%;
  padding-left: 10px;
  border-left: 1px solid #d7d7d7;
}
/** dropdown arrow **/
.selectadmin:after {
  font-family: 'WebSymbolsRegular';
  content: ':';
  font-size: 18px;
  position: absolute;
  top: 0;
  line-height: 120%;
}

The below is an example of one of the dropdowns I've got on a page, right now there's no arrow at all being displayed.
<tr>
<td width="40%" class="trow2admin"><strong><span class="admintitle">Selection:</span></strong></td>
<td width="60%" class="trow2admin"><select class="selectadmin"; style="width:48%";>
   <option value="default">General</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five/option>
    <option value="6">Six</option>
   </td>
</select>
</tr>

Help would definitely be appreciated, I tried wrapping <div class="selectadmin"></div> but it didn't work at all. All It did was create a non-workable copy of the dropdown style, no font arrow either.