css3 - selected添加 border???

Question

selected添加 border???

Answer 1

.selected{border-bottom:2px solid rgb(255,203,107)}

Answer 2

The original poster, if you use select to write, there is no way to set this effect. It is recommended that the original poster use ul li to write. I am a novice. I wrote it briefly. There are many things that need to be changed. If there is any need to be corrected, I hope you can point it out~ I wrote it simply. Many places have not been processed. For example, if you want to truly simulate a select box, the right side of the input is best. Add an arrow and it can be used as a switch.

PS: This is my first time pasting a code snippet here, so I don’t know what the format looks like. . . Just take a look.

---

html code:

<p class="choose">
            <input type="text" value="--select--" class="select" />
        
            <p class="down-select">
                <ul>
                    <li><a href="#">数学</a></li>
                    <li><a href="#">英语</a></li>
                    <li><a href="#">化学</a></li>
                    <li><a href="#">生物</a></li>
                </ul>
            </p>
        </p>

---

css code:

* { margin: 0; padding: 0;}
            a { text-decoration: none; color: #666;}
            input.select  { width: 100px; height: 30px;}
            p.down-select { display: none; width: 100px; box-shadow: 0 0 2px 2px #cccccc; }
            p.down-select ul { list-style-type: none; overflow: hidden; width: 100px; border-bottom: 2px solid #ffb200;}
            p.down-select ul li { line-height: 20px; border-bottom: 1px solid #cccccc; text-align: center; height: 30px; padding-top: 10px;}

---

js code:

$('input.select').click(function(e) {
                    e.preventDefault();
                    $('.down-select').show();
                });
                $('.down-select li').click(function(e) {
                    e.preventDefault();
                    var selectVal = $(this).find('a').text();
                    $('.select').val(selectVal);
                    $('.down-select').hide();
                });