CSS : 요소 자체의 테두리 색상 얻기

CSS를 통해 요소 자체의 색상을 어떻게 얻을 수 있습니까? 텍스트의 색상과 동일한 테두리 색상을 사용하고 싶습니다.CSS : 요소 자체의 테두리 색상 얻기

예 HTML :

<span class="status-name" style="color:#ff0000">Max</span>

CSS : 아래쪽 테두리 이제 색상 #ff0000을 가져야한다

.status-name { 
    font-weight: bold; 
    border-bottom: 1px solid ???; 
}

. 나는 inherit, auto 또는 심지어 attr(data-color) (data-color="#ff0000" 속성과 조합하여)을 시도했지만 브라우저의 모든 규칙이 유효하지 않게되었습니다.

가능하면 CSS를 통해이 문제를 해결할 필요가 있습니다.이 클래스에는 페이지에 수천 개의 요소가 있으며 주로 휴대폰에서 액세스합니다. 또한 나는 style을 통해 CSS를 설정하는 것이 최첨단은 아니지만 수백 가지 색상 값이 있으며 각각의 색상에 대해 고유 한 CSS 클래스를 만드는 것이 합리적이지 않습니까?

border-bottom: 1px solid;

출처

2013-05-20 David

은 상자의 색상 propertie이 때문에 CSS 선언에는 색상을 설정하지 상속 규칙은 일반적인 CSS 규칙을 따르지 않는 변경을 허용하기로 결정한 경우 나중에 쉽게 적용됩니다. 그렇지 않으면 다른 답변이 필요에 따라 작동합니다.

출처

2013-05-20 01:25:29 Maujor

아, 네, 젠장 나는이 시도하지 않았다 상속합니다. 고맙습니다! – David

테두리 색의 초기 값은 요소 내용의 색입니다. 이것은 상속이 아닙니다. –

예 Jukka, 정확합니다! 이것을 지적 해 주셔서 감사합니다. – Maujor

// using jquery 
$(document).ready 
(
    function() 
    { 
     $('.status-name').each(function(index, element) 
     { 
     $(element).css("borderColor", $(element).css('color')); 
     } 
    } 
);

자바 스크립트는이 조정을 허용뿐만 아니라 동적 인 경우에 사용하는 것이 훨씬 낫다 : 기본 국경으로

출처

2013-05-20 01:26:55

질문에 JavaScript 태그가없고 OP에서 순수한 CSS 솔루션을 요구하고 있습니다. – pzin

동적 규칙을 기반으로 속성 또는 스타일을 변경하는 것에 대한 내 견해를 고려하여 확장 가능한 입력을 제공하는 것, OP 규칙이 CSS에서 처리되지 않는 규칙으로 변경되는 경우 요청 된 것 이상의 단계 또는 다른 사용자보기 이런 종류의 수정이 필요한 여러 상황에서이 질문. –

이 시도 :

.status-name { 
    font-weight: bold; 
    border-bottom: 1px solid; 
}

자동으로 color

출처

2013-05-20 01:27:45 Lian

또는 더 명시 적으로 :'border-bottom : 1px solid currentColor; – jongo45

CSS : 요소 자체의 테두리 색상 얻기

답변

관련 문제