[html] CSS / HTML : 입력 필드 주위에 빛나는 테두리 만들기

내 양식에 알맞은 입력을 만들고 싶고 TWITTER가 입력 주변에서 빛나는 테두리를 어떻게 수행하는지 알고 싶습니다.

트위터 테두리의 예 / 사진 :

또한 둥근 모서리를 만드는 방법을 모르겠습니다.

답변

여기 있습니다 :

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

라이브 데모 : http://jsfiddle.net/simevidas/CXUpm/1/show/

(데모 코드를 보려면 URL에서 “show /”를 제거하십시오)

label {
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;
}

input:focus {
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>

스 니펫 확장

답변

어떻게 이런 일이 … http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

여기에 이미지 설명을 입력하십시오

CSS

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}

답변

일반 파란색 border, 중간 border-radius및 box-shadow위치가 있는 파란색을 사용하십시오 0 0.

답변

SLak은 머리에 못을 박았지만 일반적으로 CSS3의 입력 변경 사항을 살펴볼 수 있습니다. 둥근 모서리와 상자 그림자는 CSS3의 새로운 기능이며 원하는 것을 정확하게 수행 할 수 있습니다. CSS3 / HTML5에 대한 개인적으로 가장 좋아하는 링크 중 하나는 http://diveintohtml5.ep.io/ 입니다.

답변

이전 답변 중 두 가지를 결합했습니다 ( jsfiddle ).

input {
    /* round the corners */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

input:focus {
    outline:none;
    border: 1px solid #4195fc;
    /* create a BIG glow */
    box-shadow: 0px 0px 14px #4195fc;
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;
}

답변

덜 빛나는 버전으로 수정 된 버전.

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

input:focus {
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}

답변

input[type="text"]{
   @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}