HTML 텍스트 입력에서 텍스트를 선택할 때 강조 색상 변경

HTML 텍스트 입력에서 텍스트를 선택할 때 강조 색상 변경

---

나는 웹을 통해 이것을 찾고 있었고 해결책은 말할 것도없고 이것을 묻는 다른 사람조차 찾을 수 없습니다 ...

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

---

이것을 찾고 있다면 :

여기 링크가 있습니다:

http://css-tricks.com/overriding-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;
}

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 그것을 접하는 사람에게는이 JSFiddle에contenteditable 표시된 것처럼 사용할 수 있습니다 .

댓글에서 이것을 언급 한 Alex에게 찬사를 보냅니다 (지금까지 보지 못했습니다!)

---

여기의 모든 대답은 ::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 {
      배경 : # ffb7b7; / * WebKit / Blink 브라우저 /
    }
    ::-moz-selection {
      배경 : # ffb7b7; / Gecko 브라우저 * /
    }

선택 선택기 내에서 색상과 배경이 작동하는 유일한 속성입니다. 추가 감각을 위해 할 수있는 일은 페이지의 다른 단락이나 다른 섹션의 선택 색상을 변경하는 것입니다.

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

    p.red::selection {
      배경 : # ffb7b7;
    }
    p.red::-moz-selection {
      배경 : # ffb7b7;
    }
    p.blue::selection {
      배경 : # a8d1ff;
    }
    p.blue::-moz-selection {
      배경 : # a8d1ff;
    }
    p.yellow :: selection {
      배경 : # fff2a8;
    }
    p.yellow ::-moz-selection {
      배경 : # fff2a8;
    }

스타일 블록이 동일한 작업을 수행하더라도 선택기가 어떻게 결합되지 않는지 확인하십시오. 결합하면 작동하지 않습니다.

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

브라우저가 이해하지 못하거나 유효하지 않은 부분이있는 경우 전체 선택기를 무시하기 때문입니다. 이에 대한 몇 가지 예외가 있지만 (IE 7?) 이러한 선택자와는 관련이 없습니다.

데모

정보 출처 링크

---

링크 주셔서 감사합니다.하지만 실제 텍스트 강조 표시가 노출되지 않은 것 같습니다.

As far as the actual issue at hand, I ended up opting for a different approach by eliminating the need for a text input altogether and using innerHTML with some JavaScript. Not only does it get around the text highlighting, it actually looks much cleaner.

This granular of a tweak to an HTML form control is just another good argument for eliminating form controls altogether. Haha!

---

@ Mike Eng,

On selecting the text background color, text color can be changed with the help of ::selection, note that ::selection works in in chrome, to make that work in firefox based browsers try this one ::-moz-selection

Try the following snippet of code in reset.css or the css page where exactly you want to apply the effect.

::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
}

The above code will work even in the input boxes too.

---

포커스 의사 요소 스타일 선언 내부에 테두리를 정의 할 때 일반 파란색 테두리 대신 사용하는 것처럼 보입니다. 이를 사용하여 요소 테두리와 정확히 동일한 스타일을 정의 할 수 있습니다.

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;
}

Quirksmode 에서 인용

참조 URL : https://stackoverflow.com/questions/2258647/changing-the-highlight-color-when-selecting-text-in-an-html-text-input