焦點高亮邊框HTML的選擇框

我想強調的選擇框/ div的邊界時，該框在使用中選擇一個項目焦點高亮邊框HTML的選擇框

下面是關於HTML端的代碼

<div class="styled-1">     
     <select> 
      <option value="1">OPTION - 1</option> 
      <option value="2">OPTION -2 </option> 
      <option value="3">OPTION - 3</option> 
     </select> 
    </div>

這裏的CSS

.styled-1 select { 
    width: 312px; 
    padding-top: 5%; 
    padding-bottom: 5%; 
    padding-left: 5%; 
    border: none; 
    left: 50px; 
    margin-left: 20px; 
    margin-right: 20px; 
    border-radius: 50px; 
    box-shadow: 0 0 3pt 2pt #8F4A11; 
    outline: none !important; 
}

什麼是板着臉的方式來定義以下類型的CSS的」 .styled-1" 上面？

textarea:focus { 
    outline: none !important; 
    box-shadow: 0 0 3pt 2pt #719ECE; 
}

我試過以下，但沒有運氣

.styled-1:focus { 
     outline: none !important; 
     box-shadow: 0 0 3pt 2pt #719ECE; 
    }

來源

2015-09-11 User12345

:focus作品select元素上一看，你想達到什麼目的？

.styled-1 select:focus { 
    box-shadow: 0 0 3pt 2pt #719ECE;  
}

這裏的顯示結果的jsfiddle：http://jsfiddle.net/n83p5qz7/

來源

2015-09-11 03:38:01

您可以嘗試

$('select').focus(
    function(){ 
     $(this).parent('div').css('border-style','solid'); 
    }).blur(
    function(){ 
     $(this).parent('div').css('border-style','dashed'); 
    });

可以對Fiddle

來源

2015-09-11 03:37:16

['focus-within'']（https://css-tricks.com/almanac/selectors/f/focus-within/）現在可以在沒有任何JavaScript的情況下處理這個問題。 – steveax

它不工作，因爲你是在:focus僞選擇傳遞給div，而不是元素的內部select你想要的目標。嘗試是這樣的：

.styled-1 > select option:focus { 
       border: 1px solid 'your preferred color here' 
       box-shadow: 0 0 3pt 2pt #719ECE;

}

編輯：看來我誤解你的目標。這有效，但不是你想達到的目的。

來源

2015-09-11 03:46:18

焦點高亮邊框HTML的選擇框

回答

相關問題