HTML 텍스트 입력에서 텍스트를 선택할 때 하이라이트 색상 변경

StackOverflow https://stackoverflow.com/questions/2258647

문제

나는 웹 전체에서 이것을 찾고 있었고 해결책은 물론 다른 사람조차 찾을 수 없습니다 ...

텍스트를 선택할 때 텍스트 입력 내에서 하이라이트 영역의 색상을 변경하는 방법이 있습니까? 하이라이트 테두리 나 배경이 아니라 텍스트를 실제로 선택할 때 텍스트 주위에 나타나는 부분.

도움이 되었습니까?

해결책 6

링크에 감사하지만 실제 텍스트 강조 표시가 노출되지 않은 것처럼 보입니다.

당면한 실제 문제에 관한 한, 나는 텍스트 입력의 필요성을 완전히 제거하고 일부 JavaScript와 함께 InnerHTML을 사용하여 다른 접근 방식을 선택하게되었습니다. 텍스트 강조 표시를 중단 할뿐만 아니라 실제로 훨씬 더 깨끗해 보입니다.

HTML 양식 제어에 대한 조정의 세분화는 양식 제어를 완전히 제거하기위한 또 다른 좋은 주장 일뿐입니다. ㅋ!

다른 팁

이것을 찾고 있다면 :

alt text

여기 링크가 있습니다:

http://css-tricks.com/overiding-the-default-text-selection-color-with-css/

이것은 코드입니다.

/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}

나는 이것이 오래된 질문이라는 것을 알고 있지만 그것을 발견 한 사람은 누구나 사용하여 수행 할 수 있습니다. contenteditable 보여진 바와 같이 이 jsfiddle에서.

의견에서 이것을 언급 한 Alex에게 Kudos (지금까지는 보지 못했습니다!)

여기에서 모든 답변이 맞습니다. ::selection 의사 요소 및 작동 방식. 그러나 문제는 실제로 그것을 사용하는 방법을 구체적으로 묻습니다. 텍스트 입력.

그렇게하는 유일한 방법은 입력의 부모를 통해 규칙을 적용하는 것입니다 (해당 문제에 대한 부모).

.parent ::-webkit-selection, [contenteditable]::-webkit-selection {
	background: #ffb7b7;
}

.parent ::-moz-selection, [contenteditable]::-moz-selection {
	background: #ffb7b7;
}

.parent ::selection, [contenteditable]::selection {
	background: #ffb7b7;
}

/* Aesthetics */
input, [contenteditable] {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}
<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

문지름은 다음과 같습니다.

    ::selection {
      background: #ffb7b7; /* WebKit/Blink Browsers /} ::-Moz-selection {배경 : #ffb7b7; / Gecko Browsers */
    }
선택 선택기 내에서 색상과 배경은 작동하는 유일한 속성입니다. 여분의 감각을 위해 할 수있는 일은 페이지의 다른 단락이나 다른 섹션의 선택 색상을 변경하는 것입니다.

내가 한 것은 다른 클래스를 가진 단락에 다른 선택 색상을 사용하는 것입니다.

    p.red::selection {
      background: #ffb7b7;
    }
    p.red::-moz-selection {
      background: #ffb7b7;
    }
    p.blue::selection {
      background: #a8d1ff;
    }
    p.blue::-moz-selection {
      background: #a8d1ff;
    }
    p.yellow::selection {
      background: #fff2a8;
    }
    p.yellow::-moz-selection {
      background: #fff2a8;
    }
> 스타일 블록이 같은 일을하고 있지만 선택기가 어떻게 결합되지 않은지 주목하십시오. 결합하면 작동하지 않습니다.

<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}</pre>

브라우저가 이해하지 못하거나 유효하지 않은 일부가 있다면 브라우저가 전체 선택기를 무시하기 때문입니다. 이것에 대한 예외가 있지만 (즉, 7?)이 선택기와 관련이 없습니다.

데모

정보가있는 곳에 링크

@ Mike Eng,

텍스트 배경 색상을 선택할 때 텍스트 색상이 도움을 받아 변경 될 수 있습니다. ::선택, 그 점에 유의하십시오 ::선택 Chrome에서 작동하여 Firefox 기반 브라우저에서 작업을 수행하기 위해이 작업을 시도하십시오. ::-모즈 선택

reset.css 또는 정확히 효과를 적용하려는 CSS 페이지에서 다음 코드 스 니펫을 사용해보십시오.

::selection{
   //Works only for the chrome browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

::-moz-selection{
   //Works for the firefox based browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

위의 코드는 입력 상자에서도 작동합니다.

초점 의사 요소 스타일 선언 내부의 테두리를 정의 할 때 일반 파란색 테두리 대신에 사용합니다. 이를 사용하면 요소 테두리와 정확히 동일한 스타일을 정의 할 수 있습니다. 

input:focus, textarea:focus {
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

다음은 수정 된 테두리 스타일입니다. 

input:focus, textarea:focus {
    border:2px dotted red;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

이 코드를 사용해보십시오.

/* For Mozile Firefox Browser */

::-moz-selection { background-color: #4CAF50; }

/* For Other Browser*/
::selection { background-color: #4CAF50; }

도움이 될 수 있다고 생각합니다.

선택 스타일

사용자가 선택한 텍스트의 색상과 배경을 정의 할 수 있습니다.

아래에서 시도하십시오. 무언가를 선택하고 다음과 같이 보이면 브라우저는 선택 스타일을 지원합니다.

이것은 단락입니다 normal ::selection.

이것은 단락입니다 ::-moz-selection.

이것은 단락입니다 ::-webkit-selection.

테스트 시트 :

p.normal::selection {
  background:#cc0000;
  color:#fff;
}

p.moz::-moz-selection {
  background:#cc0000;
  color:#fff;
}

p.webkit::-webkit-selection {
  background:#cc0000;
  color:#fff;
}

인용 퀴크 스 모드

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top