2015-08-09 242 views
0

我沒有太多的CSS調試經驗。我在webflow上創建了一個html頁面,並獲得了相應的css文件。但是我無法以任何形式在輸入字段中輸入任何文本。的HTML是:無法在HTML表單的輸入字段中輸入文本

<!DOCTYPE html> 
<!--[if IE 9]><html lang="en" class="ie9 desktop-view not-mobile-device "><![endif]--> 
<!--[if (!IE 9) | (!IE)]><!--><html lang="en" class="desktop-view not-mobile-device "><!--<![endif]--> 
    <head> 
    <meta charset="utf-8"> 
    <title>[Tutorial] How to create a modal/pop-up in Webflow - Webflow Forums</title> 
    <meta name="description" content="Community for Webflow Users to get Support and Inspiration"> 
    <meta name="author" content=""> 
<meta name="generator" content="Discourse 1.4.0.beta3 - https://github.com/discourse/discourse version 18f887772df5b25df33e7fb1bcf14d379bb9c624"> 

<link href="/testdrive.css?__ws=forum.webflow.com" media="all" rel="stylesheet" /> 
</head> 
<body> 
<form action="demo_form.asp"> 
    First name: <input type="text" name="fname"><br> 
    Last name: <input type="text" name="lname"><br> 
    <input type="submit" value="Submit"> 
</form> 
    <div class="w-section section"></div> 
    <div class="w-section"></div> 
    <div class="w-section section"> 
    <div class="w-container container-style"> 
     <div class="label try-it">SIGN-IN</div> 
     <div class="w-form"> 
     <form id="email-form-3" name="email-form-3" data-name="Email Form 3"> 
      <label for="name-4">Name:</label> 
      <input class="w-input" id="name-4" type="text" placeholder="Enter your name" name="name" data-name="Name 4"> 
      <label for="email-6">Email Address:</label> 
      <input class="w-input" id="email-6" type="email" placeholder="Enter your email address" name="email" data-name="Email 6" required="required"> 
      <input class="w-button" type="submit" value="Submit" data-wait="Please wait..."> 
     </form> 
     <div class="w-form-done"> 
      <p>Thank you! Your submission has been received!</p> 
     </div> 
     <div class="w-form-fail"> 
      <p>Oops! Something went wrong while submitting the form</p> 
     </div> 
     </div> 
    </div> 
    <div class="w-container container-style"> 
     <div class="w-form"> 
     <form id="email-form-4" name="email-form-4" data-name="Email Form 4"> 
      <label for="name-5">Name:</label> 
      <label for="email-7">Email Address:</label> 
      <input class="w-input" id="email-7" type="email" placeholder="Enter your email address" name="email" data-name="Email 7" required="required"> 
      <input class="w-button" type="submit" value="Submit" data-wait="Please wait..."> 
     </form> 
     <div class="w-form-done"> 
      <p>Thank you! Your submission has been received!</p> 
     </div> 
     <div class="w-form-fail"> 
      <p>Oops! Something went wrong while submitting the form</p> 
     </div> 
     </div> 
     <div class="label try-it">SIGN-IN</div> 
    </div> 
    <div class="w-container container-style"> 
     <div class="label try-it">SIGN-IN</div> 
     <div class="w-form"> 
     <form id="email-form-5" name="email-form-5" data-name="Email Form 5"> 
      <label for="name-5">LOCATION</label> 
      <input class="w-input" id="name-5" type="text" placeholder="Enter your name" name="name" data-name="Name 5"> 
      <label for="field">TIME</label> 
      <input class="w-input" id="field" type="text" placeholder="Example Text" name="field" required="required"> 
      <label for="email-8">INVITEES</label> 
      <input class="w-input" id="email-8" type="email" placeholder="Enter your email address" name="email" data-name="Email 8" required="required"> 
      <input class="w-button" type="submit" value="Submit" data-wait="Please wait..."> 
     </form> 
     <div class="w-form-done"> 
      <p>Thank you! Your submission has been received!</p> 
     </div> 
     <div class="w-form-fail"> 
      <p>Oops! Something went wrong while submitting the form</p> 
     </div> 
     </div> 
    </div> 
    <div class="w-container container-style"> 
     <div class="label try-it">SIGN-IN</div><a class="button" href="#">LIST USERS</a> 
    </div> 
    <div class="w-container container-style"> 
     <div class="label try-it">SIGN-IN</div><a class="button" href="#">LIST EVENTS</a> 
    </div> 
    </div> 
    <a class="w-inline-block" href="#"> 
    <a class="w-lightbox w-inline-block" href="#"><img class="close-modal" src="https://d3e54v103j8qbb.cloudfront.net/img/placeholder-thumb.svg"> 
     <script type="application/json" class="w-json"> 
     { "items": [] } 
     </script> 
    </a> 
    </a> 
    <div class="modal-window"> 
    <div class="w-widget w-widget-map" data-widget-latlng="51.511214,-0.119824" data-widget-style="roadmap" data-widget-zoom="12"></div> 
    </div> 
    <div class="w-section section"></div> 
    <label>Label</label> 
    <div class="w-section modal-background"></div> 
</body> 

輸入字段的CSS屬性(由Chrome開發者工具複製):

-webkit-appearance: textfield; 
-webkit-rtl-ordering: logical; 
-webkit-user-select: text; 
background-color: rgb(255, 255, 255); 
border-bottom-color: rgb(238, 238, 238); 
border-bottom-style: inset; 
border-bottom-width: 2px; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(238, 238, 238); 
border-left-style: inset; 
border-left-width: 2px; 
border-right-color: rgb(238, 238, 238); 
border-right-style: inset; 
border-right-width: 2px; 
border-top-color: rgb(238, 238, 238); 
border-top-style: inset; 
border-top-width: 2px; 
color: rgb(0, 0, 0); 
cursor: auto; 
display: inline-block; 
font-family: '.HelveticaNeueDeskInterface-Regular'; 
font-size: 11px; 
font-stretch: normal; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
height: 13px; 
letter-spacing: normal; 
line-height: normal; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 1px; 
padding-left: 1px; 
padding-right: 1px; 
padding-top: 1px; 
text-align: start; 
text-indent: 0px; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
width: 125px; 
word-spacing: 0px; 
writing-mode: lr-tb; 
-webkit-writing-mode: horizontal-tb; 

包括繼承屬性:

-webkit-app-region: no-drag; 
-webkit-appearance: textfield; 
-webkit-background-composite: source-over; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-vertical-spacing: 0px; 
-webkit-box-align: stretch; 
-webkit-box-decoration-break: slice; 
-webkit-box-direction: normal; 
-webkit-box-flex: 0; 
-webkit-box-flex-group: 1; 
-webkit-box-lines: single; 
-webkit-box-ordinal-group: 1; 
-webkit-box-orient: horizontal; 
-webkit-box-pack: start; 
-webkit-box-reflect: none; 
-webkit-column-break-after: auto; 
-webkit-column-break-before: auto; 
-webkit-column-break-inside: auto; 
-webkit-column-count: auto; 
-webkit-column-gap: normal; 
-webkit-column-rule-color: rgb(0, 0, 0); 
-webkit-column-rule-style: none; 
-webkit-column-rule-width: 0px; 
-webkit-column-span: none; 
-webkit-column-width: auto; 
-webkit-font-smoothing: auto; 
-webkit-highlight: none; 
-webkit-hyphenate-character: auto; 
-webkit-line-box-contain: block inline replaced; 
-webkit-line-break: auto; 
-webkit-line-clamp: none; 
-webkit-locale: "en"; 
-webkit-margin-after-collapse: collapse; 
-webkit-margin-before-collapse: collapse; 
-webkit-mask-box-image: none; 
-webkit-mask-box-image-outset: 0px; 
-webkit-mask-box-image-repeat: stretch; 
-webkit-mask-box-image-slice: 0 fill; 
-webkit-mask-box-image-source: none; 
-webkit-mask-box-image-width: auto; 
-webkit-mask-clip: border-box; 
-webkit-mask-composite: source-over; 
-webkit-mask-image: none; 
-webkit-mask-origin: border-box; 
-webkit-mask-position: 0% 0%; 
-webkit-mask-repeat: repeat; 
-webkit-mask-size: auto; 
-webkit-print-color-adjust: economy; 
-webkit-rtl-ordering: logical; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); 
-webkit-text-combine: none; 
-webkit-text-decorations-in-effect: none; 
-webkit-text-emphasis-color: rgb(0, 0, 0); 
-webkit-text-emphasis-position: over; 
-webkit-text-emphasis-style: none; 
-webkit-text-fill-color: rgb(0, 0, 0); 
-webkit-text-orientation: vertical-right; 
-webkit-text-security: none; 
-webkit-text-stroke-color: rgb(0, 0, 0); 
-webkit-text-stroke-width: 0px; 
-webkit-user-drag: auto; 
-webkit-user-modify: read-only; 
-webkit-user-select: text; 
align-content: start; 
align-items: start; 
align-self: start; 
alignment-baseline: auto; 
animation-delay: 0s; 
animation-direction: normal; 
animation-duration: 0s; 
animation-fill-mode: none; 
animation-iteration-count: 1; 
animation-name: none; 
animation-play-state: running; 
animation-timing-function: ease; 
backface-visibility: visible; 
background-attachment: scroll; 
background-blend-mode: normal; 
background-clip: border-box; 
background-color: rgb(255, 255, 255); 
background-image: none; 
background-origin: padding-box; 
background-position: 0% 0%; 
background-repeat: repeat; 
background-size: auto; 
baseline-shift: 0px; 
border-bottom-color: rgb(238, 238, 238); 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-bottom-style: inset; 
border-bottom-width: 2px; 
border-collapse: separate; 
-webkit-border-image: none; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(238, 238, 238); 
border-left-style: inset; 
border-left-width: 2px; 
border-right-color: rgb(238, 238, 238); 
border-right-style: inset; 
border-right-width: 2px; 
border-top-color: rgb(238, 238, 238); 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
border-top-style: inset; 
border-top-width: 2px; 
bottom: auto; 
box-shadow: none; 
box-sizing: content-box; 
buffered-rendering: auto; 
caption-side: top; 
clear: none; 
clip: auto; 
clip-path: none; 
clip-rule: nonzero; 
color: rgb(0, 0, 0); 
color-interpolation: sRGB; 
color-interpolation-filters: linearRGB; 
color-rendering: auto; 
cursor: auto; 
cx: 0px; 
cy: 0px; 
direction: ltr; 
display: inline-block; 
dominant-baseline: auto; 
empty-cells: show; 
fill: rgb(0, 0, 0); 
fill-opacity: 1; 
fill-rule: nonzero; 
filter: none; 
flex-basis: auto; 
flex-direction: row; 
flex-grow: 0; 
flex-shrink: 1; 
flex-wrap: nowrap; 
float: none; 
flood-color: rgb(0, 0, 0); 
flood-opacity: 1; 
font-family: '.HelveticaNeueDeskInterface-Regular'; 
font-kerning: auto; 
font-size: 11px; 
font-stretch: normal; 
font-style: normal; 
font-variant: normal; 
font-variant-ligatures: normal; 
font-weight: normal; 
glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; 
height: 13px; 
image-rendering: auto; 
isolation: auto; 
justify-content: start; 
left: auto; 
letter-spacing: normal; 
lighting-color: rgb(255, 255, 255); 
line-height: normal; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: disc; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
marker-end: none; 
marker-mid: none; 
marker-start: none; 
mask: none; 
mask-type: luminance; 
max-height: none; 
max-width: none; 
min-height: 0px; 
min-width: 0px; 
mix-blend-mode: normal; 
object-fit: fill; 
object-position: 50% 50%; 
opacity: 1; 
order: 0; 
orphans: auto; 
outline-color: rgb(0, 0, 0); 
outline-offset: 0px; 
outline-style: none; 
outline-width: 0px; 
overflow-wrap: normal; 
overflow-x: visible; 
overflow-y: visible; 
padding-bottom: 1px; 
padding-left: 1px; 
padding-right: 1px; 
padding-top: 1px; 
page-break-after: auto; 
page-break-before: auto; 
page-break-inside: auto; 
paint-order: fill stroke markers; 
perspective: none; 
perspective-origin: 65.5px 9.5px; 
pointer-events: auto; 
position: static; 
r: 0px; 
resize: none; 
right: auto; 
rx: 0px; 
ry: 0px; 
shape-image-threshold: 0; 
shape-margin: 0px; 
shape-outside: none; 
shape-rendering: auto; 
speak: normal; 
stop-color: rgb(0, 0, 0); 
stop-opacity: 1; 
stroke: none; 
stroke-dasharray: none; 
stroke-dashoffset: 0px; 
stroke-linecap: butt; 
stroke-linejoin: miter; 
stroke-miterlimit: 4; 
stroke-opacity: 1; 
stroke-width: 1px; 
tab-size: 8; 
table-layout: auto; 
text-align: start; 
text-anchor: start; 
text-decoration: none; 
text-indent: 0px; 
text-overflow: clip; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
top: auto; 
touch-action: auto; 
transform: none; 
transform-origin: 65.5px 9.5px; 
transform-style: flat; 
transition-delay: 0s; 
transition-duration: 0s; 
transition-property: all; 
transition-timing-function: ease; 
unicode-bidi: normal; 
vector-effect: none; 
vertical-align: baseline; 
visibility: visible; 
white-space: normal; 
widows: 1; 
width: 125px; 
will-change: auto; 
word-break: normal; 
word-spacing: 0px; 
word-wrap: normal; 
writing-mode: lr-tb; 
-webkit-writing-mode: horizontal-tb; 
x: 0px; 
y: 0px; 
z-index: auto; 
zoom: 1; 

有什麼不對?

+0

作品如下預期:http://jsfiddle.net/zsnsoofk/經過Firefox和Chrome瀏覽器。 – connexo

+0

正常工作[** here **](http://jsfiddle.net/shrinivas93/r8v4rufx/1) –

+1

禁用Javascript進行測試,並檢查是否會導致您的問題。 – connexo

回答

0

謝謝大家的意見。我找到了原因...之後,我從html中刪除這個:

<div class="w-section modal-background"></div> 

它的工作原理。

相關的CSS屬性:

.modal-background { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 3; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
}