Is it possible to change the color of a placeholder text to two different colors? Let's take a look at the code:
<input type="text"
class="form-control setting-form"
id="inputDefault2"
placeholder="http://blabbr.im/#itsmynewawesomechat">
I would like to style "blabbr.im/" with the color rgba(255,255,255,0.3) and "#itsmynewawesomechat" with the color rgba(255,255,255,1)...
Styling a placeholder with two different colors is not supported. However, you can achieve a similar effect by styling both the <label> and <input> elements to appear as if they are one unit (or any other tag like a <span>).
label, input {
background-color: #4679BD;
border: 1px solid #567890;
float: left;
font-family: sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 2px 5px;
}
label {
border-radius: 2px 0 0 2px;
border-right: 0;
color: rgba(255,255,255,0.3);
padding-right: 0;
}
input {
border-radius: 0 2px 2px 0;
border-left: 0;
}
::-webkit-input-placeholder {
color: rgba(255,255,255,1);
}
:-moz-placeholder {
color: rgba(255,255,255,1);
}
::-moz-placeholder {
color: rgba(255,255,255,1);
}
:-ms-input-placeholder {
color: rgba(255,255,255,1);
}<div>
<label for="hashtag">http://blabbr.im/</label>
<input id="hashtag" type="text" placeholder="#itsmynewawesomechat"/>
</div>When it comes to customizing the placeholder style, you have a few options:
::-webkit-input-placeholder {
color: blue;
}
:-moz-placeholder { /* Works in Firefox 18 and below */
color: blue;
}
::-moz-placeholder { /* Works in Firefox 19+ */
color: blue;
}
:-ms-input-placeholder {
color: blue;
}
If you want to target your second input specifically, consider using its ID or the nth-child() selector.
Similar Question: jQuery animate backgroundColor I am looking to make a div shine or switch colors to signal to someone that they have gotten a message. What is the best way to animate the background color of a div for this purpose? ...
I have been experimenting with a basic html form to mysql using nodejs, but unfortunately it is not functioning as expected. The HTML file is named index.html and the Node.js file is called test.js. Below you can find my code: My HTML <!DOCTYPE html&g ...
Imagine a scenario where there are numerous items, each labeled with a specific class. There may be multiple items sharing the same class. If a user clicks or drags an item, I want all other items with the same class to be highlighted as well. I am looki ...
There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...
While inline styles are often considered "evil", can they still be inserted into HTML using JavaScript (such as jQuery animation)? ...
This snippet is a segment of my partial view content - <div class="form-group row"> <label for="email" class="col-sm-2 form-control-label">Email address</label> <div class="col-sm-9"> <input type="email" class=" ...
Seeking assistance with debugging this jQuery code that manipulates the top margin of an element within a container. The container has a fixed size and overflow set to hidden to create a parallax effect. The parallax effect is functioning properly, but it ...
Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...
My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...
I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...
Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...
I am currently working on developing a Cordova/Phonegap application using vue.js and the Framework7. I have been able to utilize functions like "onClick" by using the "v-on:click="OnClick" attribute within an HTML element. It's worth noting that Frame ...
I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...
I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...
I am dealing with a dynamic transition for a slider element that moves left or right. Vue only allows me to have one transition, so I am using a dynamic transition property like this: <transition v-bind:name="'slider-' + slideDirection"> ...
I've been struggling to make the images on the right side of the slider overlay the div underneath it. I've experimented with different position and z-index values, but nothing seems to work. Check out the live site here This is what I currentl ...
Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...
Hey there, I could use some assistance with formatting a code snippet. I have written JavaScript code to parse JSON data which includes latitude and longitude information: const api_url = 'json.php' async function getjsonlatest() { const resp ...
At times, I have noticed that the header of my website does not display correctly when the page initially loads. Issue: In the screenshot provided, you can see that the headings appear within the black horizontal line. image link here http://techboy.co. ...
I am aware of the function in CSS called "target" that changes the URL address. However, I need to achieve this effect without changing the URL. My main question is whether I can accomplish this using AngularJS. If so, could someone please explain how to a ...