search

Input-placeholder 색상 - Input-placeholder saegsang

1 년도s ~ 전에
코멘트: 0
견해: 75

[ css ] input placeholder 색상 변경( input부분의 예제로 설정된 글자색 변경 )

페이지 정보

작성자 웹지기 댓글 0건 조회 6,912회 작성일 18-10-24 17:32

본문

플레이스홀더 색상 변경

Show

[code]

<input type="text" name='id' placeholder="아이디">

<input type="password" name='pass' placeholder="비밀번호">

[/code]

::placeholder 가상 셀렉터를 사용하여 색상을 변경

[code]

::-webkit-input-placeholder { /* 크롬 4–56 */

    color: #9e9e9e;

}

:-moz-placeholder { /* 파이어폭스 4–18 */

   color: #9e9e9e;

   opacity:  1;

}

::-moz-placeholder { /* 파이어폭스 19–50 */

   color: #9e9e9e;

   opacity:  1;

}

:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */

   color:  #9e9e9e;

}

::placeholder { /* 파이어폭스 51+, 크롬 57+ */

   color: #9e9e9e;

   opacity:  1;

}

[/code]

각각의 prefix는 따로 적어야 한다는 점

[code]

/* 이렇게 사용할 수 없다. */

::-webkit-input-placeholder,

:-moz-placeholder,

::-moz-placeholder,

:-ms-input-placeholder { ... }

[/code]

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

[ css ] input placeholder 색상 변경( input부분의 예제로 설정된 글자색 변경 )

페이지 정보

작성자 웹지기 댓글 0건 조회 6,913회 작성일 18-10-24 17:32

본문

플레이스홀더 색상 변경

[code]

<input type="text" name='id' placeholder="아이디">

<input type="password" name='pass' placeholder="비밀번호">

[/code]

::placeholder 가상 셀렉터를 사용하여 색상을 변경

[code]

::-webkit-input-placeholder { /* 크롬 4–56 */

    color: #9e9e9e;

}

:-moz-placeholder { /* 파이어폭스 4–18 */

   color: #9e9e9e;

   opacity:  1;

}

::-moz-placeholder { /* 파이어폭스 19–50 */

   color: #9e9e9e;

   opacity:  1;

}

:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */

   color:  #9e9e9e;

}

::placeholder { /* 파이어폭스 51+, 크롬 57+ */

   color: #9e9e9e;

   opacity:  1;

}

[/code]

각각의 prefix는 따로 적어야 한다는 점

[code]

/* 이렇게 사용할 수 없다. */

::-webkit-input-placeholder,

:-moz-placeholder,

::-moz-placeholder,

:-ms-input-placeholder { ... }

[/code]

추천0 비추천0

    • 목록

    댓글목록

    등록된 댓글이 없습니다.

    placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

    다음은 꾸미기 전의 input과 textarea입니다.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    <!doctype html>

    <html lang="ko">

      <head>

        <meta charset="utf-8">

        <title>CSS</title>

        <style>

          * {

            box-sizing:border-box;

            font-family:Georgia;

          }

          input {

            width:100%;

            padding:10px10px;

            font-size:20px;

          }

          textarea {

            width:100%;

            height:100px;

            padding: 10px10px;

            font-size:20px;

          }

        </style>

      </head>

      <body>

        <p><input placeholder="This is input. Input some text..."></p>

        <textarea placeholder="This is textarea. Input some text..."></textarea>

      </body>

    </html>

    Input-placeholder 색상 - Input-placeholder saegsang

    ::placeholder 선택자로 글자 색과 모양을 바꿔보겠습니다.

    input::placeholder {

      color:red;

      font-style:italic;

    }

    textarea::placeholder {

      color:blue;

      font-weight: bold;

    }

    Input-placeholder 색상 - Input-placeholder saegsang

    Chrome

    Input-placeholder 색상 - Input-placeholder saegsang

    Firefox

    Input-placeholder 색상 - Input-placeholder saegsang

    Opera

    크롬, 파이어폭스, 오페라, 사파리 최신 버전에서는 잘 적용됩니다. 하지만, 크롬, 파이어폭스, 오페라, 사파리의 구버전과 Edge, IE에서는 적용되지 않습니다.

    이 문제를 해결하기 위해 코드를 추가합니다.

    input::-webkit-input-placeholder {

      color:red;

      font-style:italic;

    }

    input:-ms-input-placeholder {

      color:red;

      font-style: italic;

    }

    textarea::-webkit-input-placeholder {

      color:blue;

      font-weight:bold;

    }

    textarea:-ms-input-placeholder {

      color: blue;

      font-weight:bold;

    }

    Input-placeholder 색상 - Input-placeholder saegsang

    Edge

    Input-placeholder 색상 - Input-placeholder saegsang

    Internet Explorer 11

    파이어폭스의 경우 글자가 흐릿하게 나오는데, opacity 속성을 추가해서 조정할 수 있습니다.

    Input-placeholder 색상 - Input-placeholder saegsang

    Firefox

    다음은 위의 모든 내용을 담은 코드입니다.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    <!doctype html>

    <html lang="ko">

      <head>

        <meta charset="utf-8">

        <title>CSS</title>

        <style>

          * {

            box-sizing:border-box;

            font-family:Georgia;

          }

          input {

            width:100%;

            padding:10px10px;

            font-size:20px;

          }

          textarea {

            width:100%;

            height:100px;

            padding: 10px10px;

            font-size:20px;

          }

          input::-webkit-input-placeholder {

            color: red;

            font-style:italic;

          }

          input:-ms-input-placeholder {

            color: red;

            font-style:italic;

          }

          textarea::-webkit-input-placeholder {

            color: blue;

            font-weight:bold;

          }

          textarea:-ms-input-placeholder {

            color: blue;

            font-weight:bold;

          }

          input::placeholder {

            color:red;

            font-style:italic;

            opacity:1;

          }

          textarea::placeholder {

            color: blue;

            font-weight:bold;

            opacity:1;

          }

        </style>

      </head>

      <body>

        <p><input placeholder="This is input. Input some text..."></p>

        <textarea placeholder="This is textarea. Input some text..."></textarea>

      </body>

    </html>

    출처 : https://www.codingfactory.net/10755

    Placeholder 색상 바꾸기 Input-placeholder CSS Input-placeholder 가운데 정렬 CSS placeholder 위치 Input-placeholder 위치 input placeholder 줄바꿈 Input placeholder

    관련 게시물

    굿노트 노트북 표지 - gusnoteu noteubug pyoji
    굿노트 노트북 표지 - gusnoteu noteubug pyoji

    에펙 색상 설정 - epeg saegsang seoljeong
    에펙 색상 설정 - epeg saegsang seoljeong

    포켓몬 폰 케이스 - pokesmon pon keiseu
    포켓몬 폰 케이스 - pokesmon pon keiseu

    버즈 프로 바이올렛 남자 - beojeu peulo baiolles namja
    버즈 프로 바이올렛 남자 - beojeu peulo baiolles namja

    아이패드 미니6 스타라이트 실물 - aipaedeu mini6 seutalaiteu silmul
    아이패드 미니6 스타라이트 실물 - aipaedeu mini6 seutalaiteu silmul

    일러스트레이터 브러쉬 라이브러리 - illeoseuteuleiteo beuleoswi laibeuleoli
    일러스트레이터 브러쉬 라이브러리 - illeoseuteuleiteo beuleoswi laibeuleoli

    구글 프로필 색깔 변경 - gugeul peulopil saegkkal byeongyeong
    구글 프로필 색깔 변경 - gugeul peulopil saegkkal byeongyeong

    포토샵 영어 한글로 바꾸기 - potosyab yeong-eo hangeullo bakkugi
    포토샵 영어 한글로 바꾸기 - potosyab yeong-eo hangeullo bakkugi

    유니티 Image>(Color 변경) - yuniti Image>(Color byeongyeong)
    유니티 Image>(Color 변경) - yuniti Image>(Color byeongyeong)

    구글 계정 색상 - gugeul gyejeong saegsang
    구글 계정 색상 - gugeul gyejeong saegsang

    광고하는

    최근 소식

    Lg 클립보드 복구 - lg keullibbodeu boggu
    1 년도s ~ 전에 . ~에 의해 ChillingPhrasing
    세 레비 잡는 법 - se lebi jabneun beob
    1 년도s ~ 전에 . ~에 의해 ReprehensibleMetre
    마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji
    1 년도s ~ 전에 . ~에 의해 GiddyGreens
    브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon
    1 년도s ~ 전에 . ~에 의해 Self-evidentGallery
    딸기 씨 키우기 - ttalgi ssi kiugi
    1 년도s ~ 전에 . ~에 의해 DisquietingCrocodile
    스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu
    1 년도s ~ 전에 . ~에 의해 GeographicSnapshot
    마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong
    1 년도s ~ 전에 . ~에 의해 InsufferableImprisonment
    갤럭시 A31 단점 - gaelleogsi A31 danjeom
    1 년도s ~ 전에 . ~에 의해 MiraculousProjection
    실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu
    1 년도s ~ 전에 . ~에 의해 RadicalNegligence
    식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong
    1 년도s ~ 전에 . ~에 의해 TiringMonument

    광고하는

    포퓰러

    광고하는

    에 대한

    합법적인

    돕다

    사회의

    homeendejakoptzhthittr
    저작권 © 2024 ko.apacode Inc.