입력 유형 파일의 스타일링이 작동하지 않음
GerRax
웹 페이지에서 입력 "파일"의 스타일을 지정하려고하는데이 입력 버튼에 계속 문제가 있습니다. 표시되는 결과는 다음과 같습니다.
내가 원하는 결과는 파일 선택 버튼 아래의 제출 버튼입니다. 문제는 버튼을 "파일 선택"으로 스타일링 할 수없고 입력 파일의 색상을 변경하려고하면 버튼 자체가 아닌 배경이 변경된다는 것입니다. 파일 선택 버튼에 사용중인 코드는 다음과 같습니다.
input[type=file] {
border-radius: 4px;
border-color: $blue;
background-color: $blue;
border-width: 1px;
width: 100%;
-webkit-file-upload-button: hidden;
height: $base-spacing*2;
white-space: nowrap;
display: inline-flex;
align-items: center;
align-content: center;
text-align: center;
cursor: pointer;
line-height: 1.6rem;
font-size: 1.1rem;
}
HTML 코드는 다음과 같습니다.
<div>
<label for="Image" class="col-md-4 col-form-label text-md-right">
{{ __('Upload Image') }}:
</label>
<br />
<input id="Image" type="file" class="form-control-image{{ $errors->has('Image') ? ' is-invalid' : '' }}"
name="image_reference">
@if ($errors->has('image_reference'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('image_reference') }}</strong>
</span>
@endif
</div>
누구든지 파일 선택 버튼의 스타일을 어떻게 수정할 수 있는지 알아낼 수 있습니까?
모두 감사합니다.
kiranvj
파일 입력을 사용자 정의 할 수는 없습니다. 그러나 아래와 같은 옵션이 있습니다.
참고 : 코드에서 사용하는 일부 클래스에 대해 부트 스트랩을 사용했습니다. 그러나 원하는 경우 사용자 정의 클래스도 가질 수 있습니다.
한 가지 단점은 선택 파일 정보도 숨겨져 있다는 것입니다. 원하는 경우 JavaScript를 사용하여 가져 와서 버튼 아래에 표시 할 수 있습니다.
input[type='file'] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label>
<input id="Image" type="file" class="form-control-image" name="image_reference">
<span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
루프에서 작동하지 않는 파일 유형 입력
- 2
시맨틱 UI 스타일링 입력이 작동하지 않음
- 3
입력 유형 "파일"이 iPad에서 작동하지 않습니다.
- 4
링크로 변경 한 후 목록 스타일 유형 및 기타 속성이 작동하지 않음
- 5
입력 유형 파일의 변경 이벤트에서 "return"이 작동하지 않습니다.
- 6
입력의 CSS 스타일이 작동하지 않습니다.
- 7
HTML 양식의 텍스트 입력 유형에 대한 CSS가 작동하지 않음
- 8
html / jquery 입력 유형 : 라디오 내의 텍스트가 작동하지 않음
- 9
입력 [유형 파일] 변경 후 변수 imageLen이 재설정되지 않음
- 10
16.04 일본어 텍스트 입력이 작동하지 않음
- 11
16.04 일본어 텍스트 입력이 작동하지 않음
- 12
입력 파일의 수락 속성이 .pdf에서 작동하지 않는 이유는 무엇입니까?
- 13
업데이트 입력 유형 = "시간"이 작동하지 않음
- 14
.mp3를 업로드하지 않는 유형 파일의 html 입력
- 15
입력이 입력되지 않은 경우 입력 유형 텍스트 내부의 onChange가 작동하지 않는 이유
- 16
유형 파일의 입력이 화면에 표시되지 않습니다.
- 17
다음 형제 요소의 스타일이 작동하지 않습니다.
- 18
React Material UI TextField FormHelperTextProps 스타일링이 작동하지 않음
- 19
스타일링이 제대로 작동하지 않음
- 20
버튼 링크 스타일이 작동하지 않음
- 21
3 단계 메뉴 스타일링이 작동하지 않음
- 22
입력 파일의 값을 변경 (작동하지 않는다)
- 23
입력 파일의 값을 변경 (작동하지 않는다)
- 24
이 tkinter 스타일이 작동하지 않는 이유는 무엇입니까?
- 25
이 스케일링이 작동하지 않는 이유는 무엇입니까?
- 26
입력 유형 텍스트에서 작동하지 않는 preventDefault ()
- 27
일반 유형의 자동 연결이 작동하지 않음 [Spring 4+]
- 28
IF 문에서 jQuery 검사 파일 유형이 작동하지 않음
- 29
배치 파일. 작동하지 않는 파일의 변수 입력
몇 마디 만하겠습니다