MVC DropDownList Arrow style with css - css

Question

In my razor file, I am building a form.
The form controls need to reflect the modelType of the razor page I have declared, in this case, "Case" is the name of the model.
I have a Html helper DropDownList on the page for a property of case called PSCStatusID with this line:
#Html.DropDownListFor(s => s.PSCStatusID, (SelectList)ViewBag.PSCStatusList, "<--Select One-->", new { #class = "form-control" })
This works perfectly for me with of course the validation kicking in from my POCO attributes.
Notice I am sprinkling in Bootstrap css styles. Actually the creative dept. handed off the HTML to me and I am trying to get it exact.
But their version of my one liner HTML helper above is the following:
<div class="input-group">
#Html.TextBoxFor(c => c.PSCStatusID, null, new { #class = "form-control" })
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-nrsa-psc dropdown-menu-right" role="menu">
#foreach (PSCStatus item in ViewBag.PSCStatusList)
{
<li>
<a href="#" onclick="document.getElementById('PSCStatusID').value = this.text;">
#item.StatusCode - #item.StatusTextDesc
</a>
</li>
}
</ul>
</div>
</div>
So I know this is a common way these days for HTML people to display a custom dropdown and make that give that button mimicking the DropDown Arrow some bootstrap classes like class="btn btn-primary".
But this is really messing me up.
It doesn't work well with MVC.
If I now name the textbox which mimicks the dropdown selectedText PSCStatusID, it contains the actual text and not the id.
The list items aren't like select options with both text and a value.
I would have to jump through a lot of hoops to make this work.
All I really need to do is change that drop down arrow from the default to my own button looking drop down.
I've come across a lot of css like:
select::ms-expand {display: none;}
That would make the arrow disappear in IE.
And something like this:
select:after {
content: "▼"; /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: black;
}
That shows an arrow but not in the select box.
I just can't quite get it.
Does anyone have any suggestions on how to do this?
Here is what I have currently
Notice my validation working out-of-the-box:)
But this is what I need to get:
If any MVC/CSS gurus out there have an idea how to make this happen in my one liner HTML Helper verison of the drop down rather then the custom way please let me know.
Actually this is the code they handed off to me. The version I have above is where I swapped out some MVC controls for HTML:
<div class="form-group">
<label for="nrsa-psc" class="col-sm-4 control-label">*NRSA PSC Status</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="nrsa-psc">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-nrsa-psc dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div><!-- /btn-group -->
</div>
</div>
</div>
So got a little closer:
I added the selectpicker class to the dropdown:
#Html.DropDownListFor(s => s.PSCStatusID, (SelectList)ViewBag.PSCStatusList, "<--Select One-->", new { #class = "form-control selectpicker" })
Then brought bootstrap select picker css and js from github.
Then added:
.form-control.bootstrap-select.input-validation-error > button { border: 1px solid #f00; background-color: #fee; }
after:
.input-validation-error { border: 1px solid #f00; background-color: #fee; }
to get MVC validation working with the bootstrap select version of the drop down.
And added:
span.caret{color: blue;}
By the way: why is it so hard to get lines to show up as code on this site.
I hit four space all day long and it still shows up as regular text. They should make this easier - very annoying when trying to be a good citizen and post an answer.