Question

我有一个输入字段，我添加一个固定的高度。然而，当我专注于所述高度时，高度会变回原来的高度......我的意思是，当我对焦它时，＆＃39;区域＆＃39;我写的位于输入字段的中心，而我想在输入字段的底部。

我想要的原因是因为我想在输入字段中包含一个标签，所以我增加了输入字段的高度，并将标签堆叠在输入字段后面，并在输入字段上有一个透明背景。这是jsfiddle上的代码和演示：

＆＃13;

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

apply plugin: 'com.android.library'
dependencies {
    compile project(':libs:color-picker')
 }

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        minSdkVersion 7
        targetSdkVersion 22
    }
}

allprojects {
    repositories {
        jcenter()
    }
 }

/**
  * Global version names.
  */
ext {
    propBuildToolsVersion = '22.0.1'
    propCompileSdkVersion = 22
    propMinSdkVersion = 7
    propTargetSdkVersion = propCompileSdkVersion
    propVersionCode = 2
    propVersionName = '2.0'
}

＆＃13;

input {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
  height: 7vh;
  z-index: 10;
  color: black;
  background-color: transparent;
}
.test-label {
  position: absolute;
  left: 2%;
  margin: 0;
  top: 5%;
  color: #778692;
}
.form-field {
  height: 7vh;
  position: relative;
  padding: 0;
}

＆＃13;

我将如何解决这个问题？

Answer 1

我可能会在顶部添加一些填充并包含

box-sizing: border-box;

这样你的填充不会影响盒子的大小。

您将遇到的问题是，您的文字高度不依赖于视图的高度，而您的输入字段是。所以你会在不同的高度屏幕上找到不一致的结果。

以下是JS小提琴的一个例子：

http://jsfiddle.net/6uLnreu5/3/

希望这有帮助

Answer 2

使用padding-top代替固定高度。 input {padding-top: 20px;}

Answer 3

您应该在font-size上定义.test-label，padding-top上的input集等于font-size+x px 0<=x<=somevalue根据您需要在标签和文本写入区域之间进行间隙。看看小提琴 - http://jsfiddle.net/6uLnreu5/7/
此外，您必须在box-sizing: border-box上设置input，以使其高度不超过10vh

固定高度输入字段在焦点＆＃39;中心＆＃39;输入

3 个答案: