7

有没有办法选择文本输入值的第一个字母并通过样式表中的 CSS 更改其颜色？例如，我有

<input type="text" name="address" value="* Property Address :" />

我想只选择 value 属性的第一个字母 (*) 并使用 CSS 将其更改为红色。这实际上可能与 css 有关吗？

4

5 回答 5

5

编辑：我刚刚注意到Chrome中有一个错误导致光标与contenteditableand出现在错误的位置::first-letter。它适用于任何其他情况。

不久前，我推出了自己的（主要是 CSS）解决方案，用于<div contenteditable="true">结合使用<input type="hidden">，现在与您分享。它模拟文本输入，但却是一个 div。如果divis 类text，则强制输入在 1 行（否则它更接近 a textarea）。div 带有一个占位符，即它的data-placeholder属性。该form-remote-input属性向 JS 发出信号，其中input要填充的内容包含 div 的值。为了满足要求，我添加::first-letter {color: #F00;}了div. 运行代码片段以查看我的错误输入。

function remote_input_updater(element, scope) {
  var scope = typeof scope !== 'undefined' ?  scope : document;
  var remote_id = element.getAttribute('form-remote-input');
  var remote_element = scope.querySelector("#" + remote_id);
  // Load initial value
  element.textContent = remote_element.value;
  // Add blur event updater 
  var update_remote = function(e){
    remote_element.value = element.textContent;
    if(element.textContent == "") { // Remove extra <br>s that get added
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
    }
  }
  element.addEventListener('blur', update_remote);
};

[].forEach.call(document.querySelectorAll('[form-remote-input]'), function(element){remote_input_updater(element)});
[contenteditable] {
  color: #000;
  border: 1px solid black;
  padding: 3px;
  min-height: 1.2em;
}

[contenteditable]:empty::before{
    content: attr(data-placeholder);
    color: #666;
}

[contenteditable=true]:empty:focus::before{
    content: "\00a0";
}

[contenteditable]:focus {
  outline: none;
}

/* Forces single line */
.text[contenteditable] br{
    display:none;
}

.text[contenteditable] * {
  display: inline;
}

#first-red::first-letter {
  color: #F00;
}
<body>
<div class="text" id="first-red" data-placeholder="This is essentially an input" contenteditable="true" form-remote-input="remote-id"><!-- Must be no whitespace in here --></div>
<input type="hidden" id="remote-id" />
</body>

于 2016-04-12T22:33:21.483 回答
3

我不认为输入框会允许改变第一个字母的样式——似乎操作系统无法做到这一点。因此，您可以创建一个等于 的属性div，并使用 JavaScript 获取其内容，或者使用两个输入水平对齐的小解决方法，或其他方式。看到这个：contentEditable"true"

<html>
    <head>
        .leftInput{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 0px;
            width:10px;
            color:red;
        }
        .rightInput{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top: 1px solid black;
            border-left: 0px;
            margin-left: 0px;
        }
    </head>
    <body>
        <input type="text" name="address" value="* " class="leftInput" /><input type="text" name="address" value="Property Address :" class="rightInput" />
    </body>
</html>


.leftInput {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 0px;
    width: 10px;
    color: red;
}
.rightInput {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-left: 0px;
    margin-left: 0px;
}
<input type="text" name="address" value="* " class="leftInput"
/><input type="text" name="address" value="Property Address :" class="rightInput" />

于 2013-08-23T08:24:31.403 回答
0

你可以像这样通过javascript和jquery做到这一点

var firstLetter =  $("input").val().charAt(0);
var val = $("input").val();
$("input").val(val.substr(1));
var span = "<span style='color:red'>" + firstLetter + "</span>";
$(span).insertBefore("input");

jsfiddle

于 2013-08-23T08:12:29.697 回答
0

好的，尝试为您的输入提供一个填充，将您的输入包装在一个相对定位的 div 中，然后在您的文本框的这个填充内添加一个带有“*”的绝对定位 div。

使用 jQuery 或 javascript 将 div 隐藏在焦点上，如果值为空，则在模糊时再次显示它

<div style="position: relative">
  <input type="text" style="padding-left: 20px;" name="address" value="Property Address :" onfocus="$('#placeholder1').hide();" onblur="if ($(this).val() == '') {$('#placeholder1').show();}" />
  <div id="placeholder1" style="position: absolute; top: XXpx; left: XXpx; color: #123456;">*</div>
</div>

padding、top 和 left 值只是一个例子。你必须找到正确的价值观

于 2013-08-23T08:01:20.430 回答
0

你不能通过使用“输入标签”来做到这一点。

您必须使用 div 标签（参见：如何使可编辑的 DIV 看起来像一个文本字段？），然后仅对您的第一个字符使用另一个标签（如 div），然后在其上应用您的样式。

    <html>
    <head>
    <style>
    #input {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        background-color: white;
        background-color: -moz-field;
        border: 1px solid darkgray;
        box-shadow: 1px 1px 1px 0 lightgray inset;  
        font: -moz-field;
        font: -webkit-small-control;
        margin-top: 5px;
        padding: 2px 3px;
        width: 398px;    
    }
    </style>
    </head>
    <body>
    <div id="input" contenteditable><span style="color: red;">*</span>Property Address :</div>

    </body>
    </html>

DivinusVox 的另一个解决方案（仅当第一个字符是字母时才有效）：

    <html>
    <head>
    <style type='text/css'>
    #input:first-letter {
        color: red;
    }

    #input {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        background-color: white;
        background-color: -moz-field;
        border: 1px solid darkgray;
        box-shadow: 1px 1px 1px 0 lightgray inset;  
        font: -moz-field;
        font: -webkit-small-control;
        margin-top: 5px;
        padding: 2px 3px;
        width: 398px;    
    }
    </style>
    </head>
    <body>
    <div id="input" contenteditable>o Property Address :</div>

    </body>
    </html>
于 2013-08-23T07:45:48.800 回答